Bootstrap reorganization of fields from desktop to mobile

bootstrap 4 reorder columns on mobile
bootstrap columns
bootstrap 3 reorder columns on mobile
bootstrap flex
bootstrap 4 breakpoints
bootstrap 4 reverse column order mobile
bootstrap align center
bootstrap offset-right

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>

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>

Grid system � Bootstrap, Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes Columns are always 50% wide, on mobile and desktop --> <div class="row">� Remember Bootstrap is Mobile first. So we are not changing the order from desktop to mobile. Instead we change the order from Mobile to Desktop. Write code for mobile and add push pull for desktops.

This was answered in another post.

Order columns through Bootstrap4

Thanks isherwood!

Bootstrap 4 Push Pull Order Classes, Now, how would you make the B column swap positions with A column on mobile ? .order� The Bootstrap grid layout system is simple to use, allowing the same content to be laid out on mobile and desktop devices). With the new Bootstrap 3 version, it design with the “mobile first

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>

Maximize LibGuides for Mobile, Introducing our 5 tips for maximizing your LibGuides for mobile devices. Creating multiple 'columns' to display content - Try using DIVs to float content, built on the Bootstrap framework, which is designed to be responsive and mobile- first. some of your larger, designed for Desktop-style LibGuides into Pocket Guides? Here Mudassar Ahmed Khan has explained how to make GridView responsive so that it fits and adjusts itself to look good in Mobile Phone, Tablet and Desktop displays in ASP.Net using jQuery. In order to make the GridView responsive, I am using Footable jQuery plugin which is compatible with Bootstrap design. TAGs: ASP.Net, GridView, jQuery, jQuery Plugins, Bootstrap

Responsive Web Design, Almost every new client these days wants a mobile version of their In the field of Web design and development, we're quickly getting to or for when users switch from a large computer screen to an iPad. After a while, the design does stress a bit and could benefit from some rearrangement of content. Bootstrap Responsive Layout. In this tutorial you will learn how to create responsive websites with Bootstrap framework. What is Responsive Web Design. Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user by optimizing it for different devices.

A Few Different CSS Methods for Changing Display Order, grid-template-columns: repeat ( 4 , 1 fr);. } .boxes button {. grid-row: 1 ;. } The complexity of your rearrangement. Is it something simple like the� Layout and Grid System. Use the powerful mobile-first flexbox grid (via the <b-container>, <b-row>, <b-form-row> and <b-col> components) to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, CSS Sass variables and mixins, and dozens of predefined classes.

Mobile Subnavigation, Cisco.com: The desktop site uses a horizontal navigation bar holding the The mega menu is visually divided into three columns (Products,� On desktop, tooltips are easy to display because the user has a mouse hover and ample screen space. This allows the user to trigger and read the tooltip with ease. But on mobile, it’s more of a challenge because screen space is limited and there is no mouse hover. This begs the question of what the best way to display tooltips on a mobile

Comments
  • Possible duplicate: stackoverflow.com/questions/37814508/…
  • @ORunnals - okay missed the order bit that you asked. I will update the solution