Clever Geek Handbook

Bootstrap - how to make one div content non-responsive?

I am learning how to create bootstrap based web pages, but I have some problems trying to keep two elements side by side on smaller screens.
Specifically, I have 6 elements (A, B, C, D, E, F) and I want to achieve the following result:

Desktop Screen:
AB
CD
EF

Mobile screen:
A
B
CD
E
F

I have no problem with A, B, E and F (I used the col-xs- * class), but I cannot find a way to keep C and D always side by side.

Could you help me?:)

ps my code is like this:

<div class="content">
    <div class="row">
         <div class="col-xs-2">a</div>
         <div class="col-xs-2">b</div>
    </div>
    <div class="row">
         <div>c</div>
         <div>d</div>
    </div>
    <div class="row">
         <div class="col-xs-2">e</div>
         <div class="col-xs-2">f</div>
    </div>
</div>
+3


source to share


2 answers


You just need to specify the width of the columns at each breakpoint:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6">A</div>
        <div class="col-xs-12 col-sm-6">B</div>
        <div class="col-xs-6">C</div>
        <div class="col-xs-6">D</div>
        <div class="col-xs-12 col-sm-6">E</div>
        <div class="col-xs-12 col-sm-6">F</div>
    </div>
</div>


To use it in your code, it looks like this:

<div class="content">
    <div class="row">
         <div class="col-xs-12 col-sm-6">a</div>
         <div class="col-xs-12 col-sm-6">b</div>
    </div>
    <div class="row">
         <div class="col-xs-6">c</div>
         <div class="col-xs-6">d</div>
    </div>
    <div class="row">
         <div class="col-xs-12 col-sm-6">e</div>
         <div class="col-xs-12 col-sm-6">f</div>
    </div>
</div>
+6


source


The bootstrap system is pretty straightforward. There are 4 standard screen sizes. xs (less than 768px), sm (768px and above), md (992px and above), and lg (1200px and above). You can adjust different widths for each size and it will wrap accordingly. You can apply collection for each screen size to resize. The docs are very good for this. See http://getbootstrap.com/css/#grid

Your code should be something like this.



<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6">a</div>
        <div class="col-xs-12 col-md-6">b</div>
        <div class="col-xs-6">c</div>
        <div class="col-xs-6">d</div>
        <div class="col-xs-12 col-md-6">e</div>
        <div class="col-xs-12 col-md-6">f</div>
    </div>
</div>

You can also put a string class for every two lines.

+3


source






More articles:


All Articles