How to stack divs vertically on mobile but keep them horizontal on web version?

Question

I added some div tags to create two columns in a wordpress post. Here is the code I used:

#container {
   width:100%;
}
#one {
   width:50%;
   float:left;
}
#two {
   width:50%;
   float:right;
}

I added the code above to my style.css file.

When viewed on my webpage everything looks fine. However, when viewed on mobile it looks bad. Code below is what I added to post:

<div id="container">
<div id="one">content here</div>
<div id="two">content here</div>
</div>

What I'd like to do is stack the divs vertically when viewed on a mobile device. Is there a fairly simple way to do this for someone that has limited coding experience?

Thanks

Answer 1

Take a look at media queries.

@media all and (max-width:800px) //800px for tablets and phones.
{
    #one, #two
    {
        display: block; 
        float: none; 
        width: 100%;
    }
}

Note that this has to go after your code above, unless you make the selectors more specific.

Answer 2

use bootstrap ,its good way

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    
    
    
    <div class="row">
    <div class="col-md-6 col-xs-12">content here</div>
    <div class="col-md-6 col-xs-12">content here</div>
    </div>