problem when using responsive file, code in responsive file has been add in index.html but can not active?

I am newbie with HTML CSS and trying to write a very simple program with HTML CSS with responsive file and here is my problem.

I wrote an index.html file and in this file, I added two classes like this

<div class="row contact-content">
                <div class="col col-half contact-info s-col-full">
                    <p><i class="ti-location-pin"></i>Chicago, US</p>
                    <p><i class="ti-mobile"></i>Phone: +00 151515</p>
                    <p><i class="ti-email"></i>Email: [email protected]</p>
                </div>
                <div class="col col-half contact-form s-col-full">
                    <form action="">
                        <div class="row">
                            <div class="col col-half">
                                <input type="text" name="" placeholder="Name" required id="" class="form-control">
                            </div>
                            <div class="col col-half">
                                <input type="email" name="" placeholder="Email" required id="" class="form-control">
                            </div>
                        </div>
                        <div class="row mt-8">
                            <div class="col col-full">
                                <input type="text" name="" placeholder="Message" required id="" class="form-control">
                            </div>
                        </div>
                        <input class="btn pull-right mt-16" type="submit" value="Send">
                    </form>
                </div>
            </div>

As you can see in my code, in the class, I want the class Chicago, US v.v will take up 100% the screen, and the row Name Email v.v will take up 100% the screen too because I add the code

.s-col-full {
    width: 100%;
}

to the responsive.

But, it does not happen.

Here is what I got in the screen, as you can see, the Chicago US is lying next to Name, Email, Message.

But, as design, it must lie up the Name, Email, Message (because s-col-full is width: 100% in responsive)

Here is my code, sorry because I can not upload to bitbucket.

https://www.mediafire.com/folder/kfuqch81jqkwk/bai_90

Could you please give me some advice for this problem ? Thank you very much for your time.