An easy guide to rearranging Bootstrap 4 column order for mobile display

Is there a way to rearrange the columns' elements in a specific order when resizing to mobile? Here's the code snippet:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">2</div>
    <div class="col-sm-1">3</div>
    <div class="col-sm-1">4</div>
    <div class="col-sm-1">5</div>
  </div>

  <div class="row">
    <div class="col-sm-1">6</div>
    <div class="col-sm-1">7</div>
    <div class="col-sm-1">8</div>
    <div class="col-sm-1">9</div>
    <div class="col-sm-1">10</div>
  </div>

  <div class="row">
    <div class="col-sm-1">11</div>
    <div class="col-sm-1">12</div>
    <div class="col-sm-1">13</div>
    <div class="col-sm-1">14</div>
    <div class="col-sm-1">15</div>
  </div>
</div>

On resizing, I want the order to be:

[1]

[2]

[6]

[7]

[11]

[12]

[3]

[8]

[13]

[4]

[9]

[14]

[5]

[10]

[15]

I've looked into using flex-column-reverse flex-md-row, but it doesn't solve my issue. Any suggestions on how to achieve the desired order on resize?

htmlcssbootstrap-4multiple-columns

Answer №1

To achieve the desired result, make changes in your HTML code and utilize CSS grid to control the order of items. Take a look at this code snippet for reference.

.row
{
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-template-rows: repeat(5, 50px);
}
@media screen and (max-width: 767px) {
.row {
grid-template-columns: auto;
grid-template-rows: auto;
}
.col-sm-1:nth-of-type(1) {
order: 1;
}
.col-sm-1:nth-of-type(2) {
order: 2;
}
.col-sm-1:nth-of-type(6) {
order: 3;
}
.col-sm-1:nth-of-type(7) {
order: 4;
}
.col-sm-1:nth-of-type(11) {
order: 5;
}
.col-sm-1:nth-of-type(12) {
order: 6;
}
.col-sm-1:nth-of-type(3) {
order: 7;
}
.col-sm-1:nth-of-type(8) {
order: 8;
}
.col-sm-1:nth-of-type(13) {
order: 9;
}
.col-sm-1:nth-of-type(4) {
order: 10;
}
.col-sm-1:nth-of-type(9) {
order: 11;
}
.col-sm-1:nth-of-type(14) {
order: 12;
}
.col-sm-1:nth-of-type(5) {
order: 13;
}
.col-sm-1:nth-of-type(10) {
order: 14;
}
.col-sm-1:nth-of-type(15) {
order: 15;
}
}
<div class="container">
  <div class="row">
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">2</div>
    <div class="col-sm-1">3</div>
    <div class="col-sm-1">4</div>
    <div class="col-sm-1">5</div>
    <div class="col-sm-1">6</div>
    <div class="col-sm-1">7</div>
    <div class="col-sm-1">8</div>
    <div class="col-sm-1">9</div>
    <div class="col-sm-1">10</div>
    <div class="col-sm-1">11</div>
    <div class="col-sm-1">12</div>
    <div class="col-sm-1">13</div>
    <div class="col-sm-1">14</div>
    <div class="col-sm-1">15</div>
  </div>
</div>

Answer №2

If you're comfortable creating an additional div for mobile devices, here's a method to achieve it using the display utilities

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-none d-sm-block">
  <div class="row">
    <div class="col-sm-1">1</div>
    <div class="col-sm-1">2</div>
    <div class="col-sm-1">3</div>
    <div class="col-sm-1">4</div>
    <div class="col-sm-1">5</div>
  </div>;

  <div class="row">
    <div class="col-sm-1">6</div>
    <div class="col-sm-1">7</div>
    <div class="col-sm-1">8</div>
    <div class="col-sm-1">9</div>
    <div class="col-sm-1">10</div>
  </div>;

  <div class="row">
    <div class="col-sm-1">11</div>
    <div class="col-sm-1">12</div>
    <div class="col-sm-1">13</div>
    <div class="col-sm-1">14</div>
    <div class="col-sm-1">15</div>
  </div>;
</div>;
<div class="container d-sm-none d-flex align-items-center justify-content-around">
  <div>1</div>
  <div>2</div>
  <div>6</div>
  <div>7</div>
  <div>11</div>
  <div>12</div>
  <div>3</div>
  <div>8</div>
  <div>13</div>
  <div>4</div>
  <div>9</div>
  <div>14</div>
  <div>5</div>
  <div>10</div>
  <div>15</div>
</div>

Answer №3

<div class="row">
<div class="col-md-3">
    sidebar
</div>
<div class="col-md-9 ">
    main
</div>

Utilizing media queries enables you to create responsive designs, adjusting the layout based on screen size.

.row{ display:flex; flex-flow: coulmn-reverse: }

This technique can be helpful in optimizing your website for different devices and resolutions.

Answer №4

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-1 order-sm-0 order-0">1</div>
    <div class="col-sm-1 order-sm-0 order-0">2</div>

    <div class="col-sm-1 order-sm-0 order-3">3</div>

    <div class="col-sm-1 order-sm-0 order-4">4</div>
    <div class="col-sm-1 order-sm-0 order-5">5</div>

    <div class="col-sm-1 order-sm-0 order-1">6</div>
    <div class="col-sm-1 order-sm-0 order-1">7</div>

    <div class="col-sm-1 order-sm-0 order-3">8</div>
    <div class="col-sm-1 order-sm-0 order-4">9</div>
    <div class="col-sm-1 order-sm-0 order-5">10</div>

    <div class="col-sm-1 order-sm-0 order-2">11</div>
    <div class="col-sm-1 order-sm-0 order-2">12</div>

    <div class="col-sm-1 order-sm-0 order-3">13</div>

    <div class="col-sm-1 order-sm-0 order-4">14</div>
    <div class="col-sm-1 order-sm-0 order-5">15</div>
  </div>
</div>

order block

Here order-sm-0 class will neutral order in sm and above breakpoint. bootstrap has following order class helper https://getbootstrap.com/docs/4.3/utilities/flex/#order

I have organized the order classes in the following sequence 

order-0 => [1], [2]     
order-1 => [6], [7]    
order-2 => [11], [12]    
order-3 => [3], [8], [13]   
order-4 => [4], [9], [14]  
order-5 => [5], [10], [15]

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

creating a form layout with inline buttons

I have encountered an issue with aligning 2 buttons and a form with input type in a single line. Even though I have tried different approaches, I am unable to achieve the desired inline layout. Here is my current setup: .btn-registerLayout { backgr ...

htmlcsstwitter-bootstrapbootstrap-4

Generate a blank image using the canvas.toDataURL() method

I've been attempting to take a screenshot of this game, but every time I try, the result is just a blank image. var data = document.getElementsByTagName("canvas")[0].toDataURL('image/png'); var out = document.createElement('im ...

javascripthtmlhtml5-canvas

Disable blur effect on child element with relative positioning

Is there a way to create a background blur effect using material cards without affecting a specific div? <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/ ...

htmlcssmaterial-design

Utilizing Ajax to retrieve an array of input textboxes and showcase the outcome within a div container

This is the form that I have designed for displaying information: <form name='foodlist' action='checkout' method='POST'> <table> <tr> <td>Product Name</td> <td>Price</t ...

javascriptphpjqueryhtmlajax

Preventing Text Chaos in CSS Layouts: Tips and Tricks

I'm facing an issue with the alignment on this page: . When the page is resized, some of the text links are too long and causing a problem with the layout of the stacked images. How can I fix this? Here is the HTML & CSS code for reference: CSS: #b ...

htmlcss

Guide on including a dropdown-item within the navbar

I've implemented a header with a navbar inside. I want to create a dropdown menu element, but for some reason, my item is not appearing. On this link, it looks simple: https://getbootstrap.com/docs/4.0/components/navs/ Pills with dropdowns <l ...

htmlcssdrop-down-menubootstrap-4navbar

`Javascript framework suggests ajax navigation as the preferred method`

What is the best way to handle ajax navigation using jQuery? I have recently experimented with a simple jQuery ajax code to implement ajax-based navigation for all the links on a webpage. $('a').click(function(e){ e.preventDefault(); ...

javascriptjqueryhtmlajax

The 'HTMLButtonElement' type cannot be assigned to a 'string' type in TypeScript, error code: 2322

In my code, there is a function that generates "tr" and "td" elements within a table. Using a For Loop, I successfully insert "td" elements into "tr". While everything is working as expected, Visual Studio Code is throwing an error. Below is the code snip ...

javascripthtmlinnerhtml

Problem Encountered with Position Absolute in Bootstrap 3

Could you please review this demonstration and advise me on why I am encountering issues when trying to set up an absolute position on the first row? Thank you. html, body { height: 100%; } .element{ position:absolute; top:0; } .one{height:500px; backgro ...

csstwitter-bootstrap-3

Tips for aligning text alongside ons-select elements

I am working with the following HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://u ...

htmlonsen-ui

Apply a border to the div that has been selected

I have a tool for storing information and I am using *ngFor to display each instance in a line. Is there a way to add a border when clicking on a line? The border should only appear on the clicked line, disappearing from the previous one if another line i ...

htmlcssangulartypescriptbootstrap-4

Keeping Materialize CSS color changes distinct from the NPM module: best practices

In my electron application, I am utilizing the npm module materialize-css (version 0.100-2). Since npm modules are not git-tracked, I have made changes to the SASS components within the following files: node_modules/ +-- materialize-css/ +-- sass/ ...

cssnpmsassmaterialize

What is causing the div to expand even though css max-width is applied?

I am currently facing an issue with the navigation on mobile view while using Bootstrap 4. Specifically, the .nav .dropdown-menu and .text-truncate classes are not displaying ellipsis when the content text length is too long. I have attempted to resolve t ...

cssbootstrap-4

Guide on transferring PHP database information to JQuery and then adding it to a Table

Looking to utilize user input to filter and display database data in an HTML table? That's exactly what I'm trying to achieve. My goal is to use the user's input as a filter for querying the database, then present the results neatly in a tab ...

phphtmljqueryajax

What is the best way to efficiently pass a prop from a Parent styled component to its children's styled components, regardless of how deeply nested they are?

I am utilizing these customized components: import styled, { css } from 'styled-components' const Container = styled.div` background-color: ${props => props.theme === "light" ? "hsl(0, 0%, 98%)" : "hsl(235, 24%, 19% ...

javascriptcssreactjsstyled-componentsreact-props

What is the best way to interpret numerous rows of Form elements simultaneously?

What is the most efficient way to name form elements across rows for easy conversion into JSON format? Considering HTML does not have built-in Array support, what alternative method should be used? In each row, there are 2 text fields and 1 select dropdow ...

javascriptjqueryhtmljson

The max-width attribute is failing to apply to the form within the Bootstrap framework

login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...

htmlcssbootstrap-4

What's preventing vh from functioning in Chrome, yet it's fully operational in Internet Explorer?

Currently, I am utilizing vh for my project, which as far as I know represents 1 percent of the view height of the page. This measurement should function similar to percentages, especially with borders and potentially other elements. However, when I tested ...

htmlcssgoogle-chromeinternet-explorerviewport-units

The problem with dark mode background in the HTML email template is specifically affecting iPhone 11 and 12 Mini devices, and it is occurring only

Encountering issues with our html/oft email template in dark mode view specifically on iPhone 11 and 12 Mini versions. The problem arises only under the editable text section, where instead of displaying a black background color as intended by the dark mo ...

htmlcsshtml-emailemail-templatesios-darkmode

When reloading the Javascript React application, the "fetch" function is returning 'undefined' in the browser. However, when the application is reloaded directly from the API, it successfully

I am currently working on a component that retrieves a JSON object from GitHub using an asynchronous function. Here is the code snippet: async function getQueryJson(URL) { await fetch(URL) // This gets the git commits .then((res) => res.json()) // ...

javascriptreactjsbootstrap-4fetch-api