Arrange Bootstrap Grid by column for smaller screens

I have a unique setup in my Bootstrap grid, featuring 2 rows and 3 columns. On desktop, it displays like this:

 |A|B|C|
 |D|E|F|

However, the mobile view changes to:

|A|
|B|
|C|
|D|
|E|
|F|

My goal is for it to appear as follows on mobile:

|A|
|D|
|B|
|E|
|C|
|F|

Essentially, I am looking for a way to list all items of column 1 first, followed by column 2, and so on.

Is there a clever trick that can help me achieve this desired behavior in the grid?

<div class="container">
      <div class = "d-flex row">
          <div class="text-muted col-sm-2">A</div>
          <div class="text-muted col-sm-2">B</div>
          <div class="text-muted col-sm">C</div>

        </div>
        <div class = "d-flex row">
          <div class="article-content col-sm-2">D</div>
          <div class="article-content col-sm-2">E</div>
          <div class="article-content col-sm">F</div>
        
      
    </div>

Thank you!

htmlcssbootstrap-4grid

Answer №1

If you want to create a layout with three columns, each containing two rows, you can utilize the Columns feature from Bootstrap. Check out the documentation on Bootstrap layout columns for more information.

To achieve this layout, you can use the following code snippet:

 <div class="container">

          <div class = "d-flex row">

            <div class="col-sm-4">   
               <div class="text-muted col-sm-2">A</div>
               <div class="article-content col-sm-2">D</div>
            </div>
            
            <div class="col-sm-4">   
              <div class="text-muted col-sm-2">B</div>
              <div class="article-content col-sm-2">E</div>
            </div>
            
            <div class="col-sm-4">   
              <div class="text-muted col-sm-2">C</div>
              <div class="article-content col-sm-2">F</div>
            </div>

         </div>   
    </div>

This code will generate one big row with 3 columns. You can view an illustration of this layout in the picture https://i.sstatic.net/IfAQO.png.

For mobile devices, the Bootstrap grid system will stack the 3 columns vertically underneath each other to ensure proper display on smaller screens, as shown in this example: https://i.sstatic.net/EszHd.png

You have the flexibility to adjust the size of each column by modifying the "col-sm-2" class based on your preferences for different screen sizes.

Answer №2

That solution seems promising (Provided that all elements have consistent height)

 <div class="container">
      <div class = "col-lg-4 col-sm-12">
          <div class="text-muted row">A</div>
          <div class="article-content row">D</div>
      </div>
      <div class = "col-lg-4 col-sm-12">
          <div class="text-muted row">B</div>
          <div class="article-content row">E</div>
      </div>
      <div class = "col-lg-4 col-sm-12">
          <div class="text-muted row">C</div>
          <div class="article-content row">F</div>
      </div>           
  </div>

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

Using a combination of a bootstrap class and a custom CSS class to enhance your website design

How do I apply two different classes? I have two HTML select fields where the user can choose either repair or another option in the first one. When the user selects one, the second field should appear. But it also needs to have a Bootstrap class: form-con ...

htmlcssbootstrap-4

Ways to adjust the size of the parent element based on the height of a specific element

I am faced with a situation where I need to identify all elements belonging to a specific class and adjust the padding-bottom of their parent div based on the height of the matched element. For example, consider the following structure: <div class=&ap ...

javascriptjquerycss

Could leaving the src attribute empty trigger a request on all web browsers?

I'm curious about the safety of using an html image tag like this <img src width="30" height="20"/> When the ImageUrl is not set in ASP.NET, the Image control renders like this. I will populate the src attribute later on the client side I ju ...

htmlasp.netimage

Which is more efficient for rendering performance: using images, CSS gradients, or box shadows with borders?

I'm curious about improving website scroll and animation performance. Which option would be better for your mobile webapp or website: Using a repeating thin image or CSS3 gradient? or Utilizing a repeating image instead of box shadow with a borde ...

javascriptjqueryhtmlcss

Why do my buttons exhibit varying colors despite being assigned identical classes?

Creating a user-friendly interface for a news application, I designed six buttons, with two of them in blue (btn-primary) while all have the same classes. For the full code, click here https://codepen.io/tarekhassab/pen/Oojdgw?editors=1010 &l ...

twitter-bootstrapbootstrap-4

Leveraging Python Variables in HTML within a multiline Python string

Attempting to create HTML code using Python and run it from a browser. Check out the code below: import webbrowser f = open('image.html','w') message = """<html> <head></head> <body><img src="URL"></b ...

pythonhtml

Maintain the original URL when accessing resources on a proxied webpage

My goal is to host a site named site1 within an existing domain, specifically www.gateway.com. For example, instead of accessing www.site1.com/profile, I want it to be accessible at www.gateway.com/site1/profile. To achieve this setup, I am using an NGIN ...

htmlnode.jsnginxreverse-proxy

Make dark mode the default setting in your Next JS application

In my Next JS application, I have implemented both isDarkMode and handleDarkMode functions. Within the Header component, there is a toggle button that allows users to switch between light and dark modes. <ThemeContainer> <label classN ...

htmlcssnode.jsreactjsnext.js

Retrieve Checkbox within a Span using Jquery

Trying to achieve the selection of a checkbox when a user clicks on a div using jQuery. The provided fiddle shows my attempt: http://jsfiddle.net/5PpsJ/ The code snippet I have written so far is as follows, but it doesn't seem to select the checkbox ...

javascriptjqueryhtmlasp.net

What is the best way to stack an absolutely-positioned element within the children of a sibling element?

I am currently utilizing the vue-slick-carousel package to enhance my website. Within this carousel, there are three key elements that I need to interact with. The first element is an image containing a character identified by the class slide__person. The ...

htmlcssvue.jsstylesz-index

Specific solution in responsive design queries

Looking to modify the style of a div based on screen resolution. Here is an example: @media only (width: 320px){do something} I attempted using this code but it was not successful. Appreciate any assistance! ...

csswebresponsive-designmedia-queries

"Trouble encountered while trying to display Angular in an HTML document

In my Angular project, there is a feature where a list of orders is displayed in one view. Each order is represented by its title only. When the user clicks on the title, they should be redirected to a new view showing the complete content of that particul ...

javascripthtmlangularjs

Struggling to make JavaScript read JSON data from an HTML file

I am currently working on developing a word search game using django. One of the tasks I need to accomplish is checking whether the entered word exists in a dictionary. To achieve this, I have been converting a python dictionary into JSON format with json. ...

javascriptpythonhtmljson

Creating a connection between a secondary jQuery anything slider and a distinct CSS style on a webpage

Currently, I am attempting to incorporate two anything sliders within the same webpage. My goal is to apply unique styling to each slider. Despite my efforts, I am encountering difficulties in calling upon a second style sheet without it completely overr ...

jquerycssanythingslider

Extracting table data using regular expressions in Import.io is a powerful method to retrieve specific values

Need some assistance. I am currently utilizing import.io and aiming to extract table data using regex. My goal is to retrieve values from specific columns, below is the code snippet: <table> <tr> <td class='label&apos ...

phphtmlregexweb-scraping

I am struggling to prevent the background image from endlessly repeating despite my best coding efforts

I am struggling to correctly write the code to display the background image in this page only once, without repeating, and centered about 500px down the page. I tried something like "background-image: norepeat" but it didn't work. I looked at the W3C ...

htmlcss

Enhanced HTML5 semantic functionality available for all browsers requiring it

There is a tool called HTMLshiv that we are instructed to use with IE9- but it seems that older versions of other browsers do not fully support those tags. Is there a combined conditional statement that can be used for all browsers? If HTMLshiv only work ...

htmlcross-browsersemantics

PHP response is blank when password_hash or password_verify functions are used

My application utilizes JavaScript to retrieve a string and send it via POST to a PHP file on the server for processing. The PHP receiver is responsible for parsing the string, performing tasks, and sending back status updates to JavaScript. However, after ...

javascriptphphtmlpasswords

Iterate through each of the selected checkboxes

Can anyone provide guidance on this issue? I am dealing with two web pages - one containing multiple check boxes in a form that POSTs to the second page. Is there a method to pass all the checked checkboxes' values to the second page in order to deter ...

c#asp.nethtmlcheckboxforeach

Displaying motion of a vehicle with a series of images

Can anyone provide tips on creating an animation that uses multiple images in CSS or jQuery? I was inspired by a Windows skin and would like to create a rotating car animation. Is this possible? Any advice is greatly appreciated. Thank you! ...

jquerycssanimation