Bootstrap reorganization of fields from desktop to mobile

Question

I have 4 fields in my form. 3 of the fields (one, two & three) are the same width and all fit on a row through a col-md-4 class. The 4th field (four) should always be col-12. What I need is for them to be laid out with one two and three on the same row and four on the next row when in medium window size or higher, but when it's a smaller screen size, I want them laid out top to bottom in the order of one, four, two, three.

Right now I have them setup on different rows but I don't think that's going to work.

Any help would be greatly appreciated:

Here's what I have so far that's not working:

  <div class="row">
    <!--one-->
    <div class="form-group col-md-4">
      <label for="one" class="form-control-label"><span class="required">*</span>Task Category</label>
      <select class="form-control" id="one" name='one' title="Select one" data-size="5">
      </select>
    </div>
    <!--two-->
    <div class="form-group col-md-4">
      <label for="two" class="form-control-label"><span class="required">*</span>one</label>
      <select class="form-control" id="two" name='two' title="select two" data-size="5">
      </select>
    </div>
    <!--three-->
    <div class="form-group col-md-4">
      <label for="three" class="form-control-label"><span class="required">*</span>two</label>
      <select class="form-control" id="three" name='three' title="select three" data-size="5">
      </select>
    </div>
  </div>
  <!--Row-->
  <div class="row">
    <!--four-->
    <div class="form-group col-12">
      <textarea class="form-control" id="four" rows="3"
        placeholder="Describe four"></textarea>
    </div>
  </div>

Possible duplicate: https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4 — isherwood, Dec 19 '19 at 17:30

score 0 · Answer 1 · answered Dec 19 '19 at 17:21

You can get this done by using responsive classes for col, i.e col-sm col-md and col-lg on each of the fields. See below.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="row">
    <!--one-->
    <div class="form-group col-sm-12 col-md-4 col-lg-4">
      <label for="one" class="form-control-label"><span class="required">*</span>Task Category</label>
      <select class="form-control" id="one" name='one' title="Select one" data-size="5">
      </select>
    </div>
    <!--two-->
    <div class="form-group col-sm-12 col-md-4 col-lg-4">
      <label for="two" class="form-control-label"><span class="required">*</span>one</label>
      <select class="form-control" id="two" name='two' title="select two" data-size="5">
      </select>
    </div>
    <!--three-->
    <div class="form-group col-sm-12 col-md-4 col-lg-4">
      <label for="three" class="form-control-label"><span class="required">*</span>two</label>
      <select class="form-control" id="three" name='three' title="select three" data-size="5">
      </select>
    </div>
    <div class="form-group col-sm-12 col-md-12 col-lg-12">
      <textarea class="form-control" id="four" rows="3"
        placeholder="Describe four"></textarea>
    </div>
  </div>

@ORunnals - okay missed the order bit that you asked. I will update the solution — RR1112, Dec 19 '19 at 17:29

score 0 · Accepted Answer · answered Dec 20 '19 at 16:56

0

This was answered in another post.

Order columns through Bootstrap4

Thanks isherwood!

answered Dec 20 '19 at 16:56

ORunnals

131
7

score 0 · Answer 3 · answered Dec 20 '19 at 17:04

You can use order to fix this: By adding order-2 and order-md-12 you can specify that in md size or more than that the fourth element stick to the bottom and in sm to md size be in the second place. You also need to add order-1, order-3 and order-4 to other form items too:

 <div class="row">
    <!--one adding order-1 -->
    <div class="form-group col-md-4 order-1">
      <label for="one" class="form-control-label"><span class="required">*</span>Task Category</label>
      <select class="form-control" id="one" name='one' title="Select one" data-size="5">
      </select>
    </div>
    <!--two order-3 -->
    <div class="form-group col-md-4 order-3">
      <label for="two" class="form-control-label"><span class="required">*</span>one</label>
      <select class="form-control" id="two" name='two' title="select two" data-size="5">
      </select>
    </div>
    <!--three order-3 -->
    <div class="form-group col-md-4 order-4">
      <label for="three" class="form-control-label"><span class="required">*</span>two</label>
      <select class="form-control" id="three" name='three' title="select three" data-size="5">
      </select>
    </div>
  </div>
  <!--Row-->
  <div class="row">
    <!--four order-2 order-md-12 -->
    <div class="form-group col-12 order-2 order-md-12">
      <textarea class="form-control" id="four" rows="3"
        placeholder="Describe four"></textarea>
    </div>
  </div>

Bootstrap reorganization of fields from desktop to mobile

3 Answers3