Adjusting Column Order in Bootstrap 4 for Mobile Screens

I have a unique challenge regarding changing the order of columns in Bootstrap for mobile devices. While I have come across many Stack Overflow questions on this topic, none seem to address changing the order of columns that are on different rows.

<div class="row d-flex justify-content-around mb-5">
  <div id="selectProductCol" class="col-sm-12 col-lg-5">
    <div class="d-flex flex-column">
      <div class="d-flex justify-content-between">
        <mat-placeholder class="placeholder mr-3 mb-1">בחר סוג מוצר</mat-placeholder>
        <span class="ml-3" matSuffix matTooltip="סוג מוצר" matTooltipPosition='right'>
                                        </span>
      </div>
    </div>
  </div>

  <div id="selectCashierCol" class="col-sm-12 col-lg-5 order-first order-md-last">
    <div [@fade]="products.length > 0 ? 'active' : 'inactive'">
      <div class="d-flex flex-column">
        <div class="d-flex justify-content-between">
          <mat-placeholder class="placeholder mr-3 mb-1">בחר קופה</mat-placeholder>
          <span class="ml-3" matSuffix matTooltip="שם הקופה" matTooltipPosition="right">
                                            </span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row d-flex justify-content-around mb-5">
  <div id="selectInsuranceCol" class="col-sm-12 col-lg-5" [@fade]="companies.length > 0 ? 'active' : 'inactive'">
    <div class="d-flex justify-content-between">
      <mat-placeholder class="placeholder mr-3 mb-1">בחר חברת ביטוח</mat-placeholder>
      <span class="ml-3" matSuffix matTooltip="שם חברת הביטוח" matTooltipPosition='right'>
                                    </span>
    </div>
  </div>

  <div id="addImageCol" class="col-sm-12 col-lg-5 text-center align-self-center">
    <div *ngIf="policyForm.get('firstPage.productType').value?.type !== 'executive' &&
                        policyForm.get('firstPage.productType').value?.type !== null ">
      <button mat-button type="button" id="uploadFileButton" class="form-upload-btn">
                                        <label>
                                            <input type="file" (change)="setFile($event.target)">
                                        </label>
                                    </button>
    </div>
  </div>
</div>

I am looking to rearrange the order of selectCashierCol and selectInsuranceCol columns on mobile devices

csstwitter-bootstrapmobilebootstrap-4responsive-design

Answer №1

It's impossible to rearrange columns in different rows because they do not have the same flexbox parent (the row). The solution is to place the columns within the identical parent .row...

  <div class="row d-flex justify-content-around mb-5">
        <div id="selectProductCol" class="col-sm-12 col-lg-5 pb-5">
            <div class="d-flex flex-column">
                <div class="d-flex justify-content-between">
                    <mat-placeholder class="placeholder mr-3 mb-1">Choose Product Type</mat-placeholder>
                    <span class="ml-3" matSuffix matTooltip="Product Type" matTooltipPosition='right'>
                    </span>
                </div>
            </div>
        </div>
        <div id="selectCashierCol" class="col-sm-12 col-lg-5 order-first order-md-last pb-5">
            <div [@fade]="products.length > 0 ? 'active' : 'inactive'">
                <div class="d-flex flex-column">
                    <div class="d-flex justify-content-between">
                        <mat-placeholder class="placeholder mr-3 mb-1">Choose Cashier</mat-placeholder>
                        <span class="ml-3" matSuffix matTooltip="Cashier Name" matTooltipPosition="right">
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div id="selectInsuranceCol" class="col-sm-12 col-lg-5" [@fade]="companies.length > 0 ? 'active' : 'inactive'">
            <div class="d-flex justify-content-between">
                <mat-placeholder class="placeholder mr-3 mb-1">Choose Insurance Company</mat-placeholder>
                <span class="ml-3" matSuffix matTooltip="Insurance Company Name" matTooltipPosition='right'>
                </span>
            </div>
        </div>
        <div id="addImageCol" class="col-sm-12 col-lg-5 text-center align-self-center">
            <div *ngIf="policyForm.get('firstPage.productType').value?.type !== 'executive' &&
                        policyForm.get('firstPage.productType').value?.type !== null ">
                <button mat-button type="button" id="uploadFileButton" class="form-upload-btn">
                    <label>
                        <input type="file" (change)="setFile($event.target)">
                    </label>
                </button>
            </div>
        </div>
  </div>

Answer №2

In the grid system of bootstrap version 4, you can define the order of a div using the "order-(number from 1 to 12)" class. For example, the class order-2 will position the div second in line. If no order class is added, the default order is 0, making the div appear first in the layout. To customize the order for different screen sizes, you can use classes like order-lg-1 order-12 to place a div first on desktop but last on mobile.

Note: This order class only works with divs that have column classes and not on parent row containers.

For more details, refer to the official Bootstrap documentation: https://getbootstrap.com/docs/4.0/layout/grid/

Answer №3

If you're searching for a way to adjust the order of elements using CSS, the order property is what you need. The MDN website provides an excellent example of how to use this feature. Interestingly, this property is a native part of CSS, so even if you decide not to utilize the bootstrap library, you can still take advantage of this functionality. Pretty neat, right?

Check out this link for more information on the order property.

I hope this information proves useful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Validation message causing Bootstrap form inline to lose center alignment

Could someone please assist me with form inline in Bootstrap? I am trying to ensure that all inputs are of the same height (or centered), but I'm facing an issue when a validation message is displayed. DEMO: http://codepen.io/Tursky/pen/gpvgBL?editor ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Custom Pug design without any CSS files added

I am having trouble with my .pug template in my express project as it is not including its stylesheets. I have referred to the pug documentation but still can't figure out the issue. Any help would be appreciated! FILE TREE: views `-- index.pug `-- ...

cssexpresspug

Custom div element obstructs information window on map due to lack of auto panning feature

I created a unique div that is absolutely positioned on a Google Map. You can view the image below to see it. My issue is that the info window is being covered by this custom div element, as demonstrated in the picture. https://i.stack.imgur.com/1TgyQ.jpg ...

javascripthtmlcssgoogle-maps

Exploring the wonders of CSS with Socialchef

Hey, I recently came across a solution on Stack Overflow where they provided code for SocialChef to convert decimal inputs into fractions. I'm wondering how I can write or incorporate some code to input fractions and mantissa as a fraction... I ...

phpcss

Adjusting image width using jQuery

I have been experimenting with creating a Webgl hover effect for an image. The effect works well, but now I am trying to specify a width for the image within jQuery. new hoverEffect({ parent: document.querySelector('.ticket'), intensity1: 0. ...

javascriptjqueryhtmlcss

When the caret triangle is upside down, it indicates that a drop-down menu is available even when the

I am facing an issue with a dropdown list where the triangle indicator is incorrectly displayed: https://i.stack.imgur.com/L4NBW.png Both images show that the arrows are in reverse direction, and I am struggling to identify the cause of this problem. He ...

javascriptjqueryhtmlcss

Bootstrap 5's h-100 feature functions flawlessly in Chrome, however, it encounters issues when used with a group

Can you please refer to this question: Issue with Aspect Ratio of Images in Bootstrap 5 due to Padding After applying the h-100 solution, everything looks great on Chrome. Unfortunately, when I check it in Safari, the aspect ratio of the image gets distor ...

cssgoogle-chromesafaribootstrap-5

Designing dynamic SVG elements that maintain uniform stroke widths and rounded edges

I'm currently tackling a project that involves creating SVG shapes with strokes that adjust responsively to the size of their parent container. My aim is for these shapes to consistently fill the width and height of the parent container, and I intend ...

javascripthtmlcsssvgfrontend

Stop webpage loading with -webkit-transform

I recently encountered a frustrating issue with the Background Image display problem on iPad. I received advice to add -webkit-transform: translateZ(0); to the id, which initially fixed the problem but then led to a new issue. While it resolved the backgro ...

ioscsssafariwebkitwebkit-transform

What could be causing certain grid items to display in a disorderly manner?

Currently, I am working on a CSS grid layout that resembles the one showcased in this demo. The challenge I'm facing is related to the ordering of items within the grid. Specifically, every 6th and 7th item seem to be out of order and I would like the ...

htmlcsslayoutcss-selectorscss-grid

Make sure to consistently show the rating bubble within the md-slider

I am currently exploring the functionality of md-slider in its md-discrete mode. However, I would like to have the slider bubble always visible on the screen, similar to this: I do not want the slider bubble to disappear when clicking elsewhere. Is there ...

angularjscssangular-material

The mui table does not adjust to different screen sizes

Currently, I am using the Material-UI table, but it is not responsive. I am looking to set the width in percentages for better adaptability. Below are screenshots from two different screens showcasing the output: https://i.sstatic.net/lxA3u.png https:// ...

reactjsbootstrap-4material-ui

Change the opacity of a DIV or any other element when hovering over it

I have successfully applied opacity: 1; to a paragraph when hovering over itself. However, I want the opacity to also change when hovering over the header above it. Here is my CSS code: .testH { font-family: impact; text-align: center; font-s ...

htmlcss

Modify the bootstrap dropdown background to display only an image

I am looking to make the image in a dropdown/dropup menu fill the entire background of the dropdown. Currently, there is still white space visible around the image. How can I ensure that the dropdown shows only the image and includes a scroll wheel? Addit ...

htmlcssbootstrap-4

Picture is not appearing on web browser within Node application

Recently, while working with Visual Studio Code, I decided to incorporate an image into my Node project. After downloading the image from the internet and placing it in the directory, I renamed it to 'file_2.jpeg'. I then included <img src = " ...

htmlcssnode.jsvisual-studio-code

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

The problematic max-width with srcset attribute

Here's the HTML markup I'm working with: <picture> <source srcset="img/home-page/placeholders/placeholder_2560.jpg" media="(max-width: 2560px)"> <source srcset="img/home-page/placeholders/placeh ...

htmlcsssrcset

HTML: Dealing with issues in resizing and resolution with floating elements on the left and right using

Encountering some issues with the HTML code below when resizing the window: 1: The right bar suddenly drops down if the width is made too small. 2: The spacing between the content and the right bar expands as the window width increases. <style ty ...

htmlcss

Warning: Resource issue detected on driver object that has already been closed

I am newly implementing a Page Object design pattern for automated testing in Selenium using Python. Encountered an error indicating that some resources were not properly closed: C:\Users\48796\PycharmProjects\test_page_mobile\ ...

python-3.xseleniummobileautomated-tests

Error validation for jQuery div dropdown

Can jQuery validation be used to set the required attribute on a Bootstrap styled div dropdown instead of an option/select tag? The tags cannot be changed on this page, and there are multiple div dropdowns. <div class="btn-group"> <button typ ...

javascriptjquerytwitter-bootstrapvalidation