2

I would like the fields of my form to be placed differently on desktop and on tablet. For now, everything is fine on desktop. I have two similar cases. In the first one, I have something like this (the input fields are in the div's) :

<div class="row">
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
    <div class="col-md-3 col-sm-6"></div>
</div>

It doesn't look bad on tablets, but instead of having only one field in the 3rd and 6th rows, I would like to have two. Should I use just one "row" instead of 2, and use empty "col-md-3" 's on desktop in order to have a single "row" going across multiple lines?

In the end I have a similar case :

<div class="row">
    <div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
    <div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
    <div class="col-md-3 col-sm-6"></div>
</div>

I would like the two first fields to be on the same line.

Thanks

user1319182
  • 481
  • 12
  • 26

2 Answers2

1

Yes, put them all in a single .row element. This is known as column wrapping.

Demo: http://www.codeply.com/go/7mUSsbO8od

From the Bootstrap docs:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

There are also examples in the docs that demonstrate column wrapping. Just remember you may need to use responsive resets, if the columns vary in height.

Graham
  • 7,431
  • 18
  • 59
  • 84
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

You mean like this? 

<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="col-md-6 col-sm-6"></div>
        <div class="col-md-6 col-sm-6"></div>
        <div class="col-md-12 col-sm-6"></div>
    </div>
</div>
Manny See Te
  • 1
  • 1
    I haven't tried it but I don't think it's gonna work. Just having a col-md-6 at the top would change the desktop design. I'm not following. – user1319182 Mar 18 '17 at 11:17