Ordering the second column lower on mobile

Question

I have a form with the following 2-column layout. It displays well on a desktop browser. For this example, each letter/number combo is an input field:

col-md-6    col-md-6
   A1   |      B1
   A2   |      B2

   A3   |      B3
   A4   |      B4
   A5   |

   A6   |      B6

I separated the input fields by rows. For example, input fields A1 and B1 are both in one row. A3, B3, A4, B4, and A5 are also in one row. I did this so that I wouldn't have to measure and impose a height on B3 and B4 to keep the spacing aligned between columns.

However, when I resize to a mobile browser, I want all the B values to fall under the A values like so:

I've looked at several different methods involving push and pull, but I can't seem to find a CSS-only solution. There are about 80 input fields on the page. I also tried to measure heights but this is proving to be a clunky way to do it since the fields change frequently and I need to re-test the display on numerous browsers.

Any clever solutions?

UPDATE:

Here's a working example of two rows for brevity, as requested in the comments:

<div class="row">
     <div class="col-md-6 form-group-primary">
        <form:input path="firstName" type="text" class="form-control"/>
     </div>
     <div class="col-md-6 form-group-container-co">
        <form:input path="coFirstName" type="text" class="form-control"/>
     </div>
</div>
<div class="row">
     <div class="col-md-6 form-group-primary">
         <form:input path="lastName" type="text" class="form-control"/>
     </div>
     <div class="col-md-6 form-group-container-co">
         <form:input path="coLastName" type="text" class="form-control"/>
     </div>
</div>

You need to post a working example of your code (HTML/CSS/JS) in a Snippet. See [mcve]. — vanburen, Dec 26 '15 at 06:07

tao · Accepted Answer · 2015-12-28T03:36:13.543

.lg-spacer {
  visibility: hidden;
}
@media (max-width: 767px) {
  .lg-spacer {
    display: none;
  }
  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="a1" />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="a2" />
      </div>
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="a3" />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="a4" />
      </div>
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="a5" />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="a6" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="b1" />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="b2" />
      </div>
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="b3" />
      </div>
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="b4" />
      </div>
      <div class="form-group-primary lg-spacer">
        <input type="text" class="form-control" disabled />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="b6" />
      </div>
      </div>
    </div>
  </div>
</div>

If you can't change the markup (it's generated by some plugin, etc...) it can be done using flexbox.

This looks really close to what I need - how would I stagger the rows like with A5 in the question? — riddle_me_this, Dec 28 '15 at 02:55
What's stopping you from using spacers? Just replicate corresponding elements from the left column with `visibility: hidden` (so you have the same height) and `display: none;` on mobile. Make sure you disable all spacer inputs so they don't show up in the submitted form. Updated answer. The only other option is using flexbox and `flex-order` on each element, but you don't really want to mix Bootstrap 3 with flexbox. — tao, Dec 28 '15 at 03:39

Ordering the second column lower on mobile

1 Answers1