-6

Im working on a grid in bootstrap, now I have 4 cols in a row, but I need to set it in two rows (each with two columns) when the screen size is set to md (or sm). How I can get that?

<div class="container">
 <div class="row">
  <div class="col">
    <div class="panel panel-blue">This is a column.</div>
  </div>
  <div class="col">
     <div class="panel panel-purple">This is a column.</div>     
   </div>
<div class="col">
     <div class="panel panel-purple">This is a column.</div>     
   </div>
<div class="col">
    <div class="panel panel-purple">This is a column.</div>     
 </div>
<div class="col">
      <div class="panel panel-purple">This is a column.</div>     
   </div>
 </div>
</div>

3 Answers 3

1

It's already in the Documentation https://getbootstrap.com/docs/4.3/layout/grid/#responsive-classes

You can use

<div class="container">
 <div class="row">
  <div class="col-sm-12 col-md-6">
    <div class="panel panel-blue">This is a column.</div>
  </div>
  <div class="col-sm-12 col-md-6">
     <div class="panel panel-purple">This is a column.</div>     
   </div>
<div class="col">
     <div class="panel panel-purple">This is a column.</div>     
   </div>
<div class="col-sm-12 col-md-6">
    <div class="panel panel-purple">This is a column.</div>     
 </div>
<div class="col-sm-12 col-md-6">
      <div class="panel panel-purple">This is a column.</div>     
   </div>
 </div>
</div>
0

Instead of:

<div class="col">

use:

<div class="col-md-6">

Bootstrap uses a 12 column layout by default.

Of course, have a look at the official documentation for more info.

0

Finally I got it, just setting

col-sm-6 col-md-auto

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.