Guide on transforming a layout with 2 rows of 3 columns into 3 rows of 2 columns when viewing on mobile screens using Bootstrap 4

In my design, I have 2 rows with 3 columns each on desktop view:

    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        2
      </div>
      <div class="col-md-4">
        3
      </div>
    </div>

I would like these columns to automatically split into 3 rows of 2 columns on mobile devices:

<div class="row">
  <div class="col-xs-6">
    1
  </div>
  <div class="col-xs-6">
    2
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    3
  </div>
  <div class="col-xs-6">
    1
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    2
  </div>
  <div class="col-xs-6">
    3
  </div>
</div>

Is there a built-in method in Bootstrap 4 to achieve this layout or should I rely solely on CSS? I'd prefer not to use JavaScript due to the complexity of rows and columns with different IDs and classes. Thank you!

htmlcssbootstrap-4grid

Answer №1

Give this a shot:

To create a responsive layout, utilize the col division within a single row class.

In Bootstrap 4, it is recommended to use col-* instead of col-xs-*.

Simply replace instances of col-xs-6 with col-6 for the desired outcome.

On desktop view: https://i.sstatic.net/0BXgT.png

On mobile view:

https://i.sstatic.net/LwFrB.png

For more insight into the Bootstrap Grid system, please refer to the link provided above. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container mt-3 text-center">
  <div class="row w-100 mx-auto">
    <div class="col-md-4 col-6 border">1</div>
    <div class="col-md-4 col-6 border">2</div>
    <div class="col-md-4 col-6 border">3</div>
    <div class="col-md-4 col-6 border">1</div>
    <div class="col-md-4 col-6 border">2</div>
    <div class="col-md-4 col-6 border">3</div>
  </div>
</div>

Answer №2

<div class="row">
      <div class="col-md-4 col-sm">
        A
      </div>

      <div class="col-md-4 col-sm">
        B
      </div>
</div>

<div class="row">

      <div class="col-md-4 col-sm">
        C
      </div>

      <div class="col-md-4 col-sm">
        D
      </div>

</div>

<div class="row">

      <div class="col-md-4 col-sm">
        E
      </div>

      <div class="col-md-4 col-sm">
        F
      </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

Angular: "btn" class vanishes when the button is toggled

I am facing an issue with the button's class change functionality. I am using the [ngClass] directive to switch between Bootstrap classes for the button style. However, when I click the button, the "btn" class seems to disappear from the code. Instead ...

cssangulartypescript

Having difficulty displaying the div with jquery when a specific option is selected

This text is placed in the header section <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> Now this content is within the body of the document <select name="product" id="product"> <option val ...

javascriptjqueryhtmlcsshtml-select

Switch between list items using a button to change the ID in Javascript

I am trying to implement a floating navbar that appears after a button click and floats down from the top. The idea is that when the button is clicked, the navbar animates downward and then changes the button's id so that the next click triggers a dif ...

javascripthtmljquerybutton

Having difficulty in setting a Cookie with php

Working on integrating social login, I attempted logging in with Facebook. Upon successful authentication of the user, I aim to retrieve their value and store their ID in a cookie to establish a session throughout the site. Below is the code snippet, < ...

phphtmlcookiessetcookie

Issue with background repetition in CSS

I'm looking to stretch a background image along the left margin of my webpage. Here's the CSS I'm using: body, html{ height:100%; } #content{ background:url(../images/leftBorder.png); background-repeat:repeat-y; height:100% ...

css

Leveraging Kendo Grid within MVC using AJAX

I'm trying to display users in a Kendo Grid. Take a look at my Controller: public class UserController : Controller { public ActionResult Index() { return View(); } public ActionResult Users_Read([Data ...

ajaxasp.net-mvckendo-uigrid

Looping through the Rock Paper Scissors game rhythm

Currently, I am in the process of developing a Stone, Paper, Scissors Game that offers three different modes of play: best of 3, best of 5, and endless games. Everything in my code functions as intended until the point where I attempt to reset the game fo ...

javascripthtml

Leverage HTML and CSS to style an email template within the Code Igniter framework

How can I send a visually appealing email using Codeigniter? Currently, my controller code is sending HTML code instead of rendering the content properly. Here is what I have so far: public function test_email() { $message = $this-> ...

htmlemailcodeigniter

Is using window.postMessage(...) a viable option for facilitating cross domain file uploads?

I'm wondering if there is a way to achieve cross domain file upload using window.postMessage(...) or any other technique. Can anyone help with this? ...

ajaxhtmlcross-domain

Adjust the mouse scrollbar and correct the vertical scrollbar in Codemirror 3.23 when switching the direction to rtl

Is there a way to dynamically change the text direction based on the language being used? I encountered an issue when switching from LTR to RTL where two vertical scrollbars appear in the textarea of codemirror. Removing the overflow-y: scroll property cau ...

javascriptjquerycss

I'm looking to customize the background color and font size for an accordion in Bootstrap 4 with Vue.js. Can anyone provide guidance

Hello, I am currently using an accordion with Bootstrap 4 and Vue.js. Here is the code snippet: <div class="faq_accordion" role="tablist"> <b-card no-body class="mb-1"> <b-card-header header-tag=" ...

csstwitter-bootstrapvue.jsbootstrap-4

Stylish Zigzag Border with a Patterned Background

Recently, I've been experimenting with creating a header that features a unique zigzag border. Traditionally, this effect is achieved using images to achieve the desired look. (1) I am curious if there is a way to implement a cross-browser compatible ...

htmlcsscss-shapeszigzag

Leverage the model attribute in a Spring controller to conditionally display elements using

I am currently working with spring boot, angularjs and using html as the view. This setup is being implemented in index.html. <a ng-show="permission=='write'"> By returning the 'permission' value in the model from the spring boo ...

htmlangularjsspring

Combining choices with a PHP dropdown menu

Here's my PHP code: echo '<option' . if(isset($_SESSION['hoopSelect'])){ echo 'selected="'$_SESSION['hoopSelect'])'"';} . 'value='. $row_list['username'] . '>' . ...

javascriptphphtmlpostgresqlsession-variables

The Project_Name index has not been defined

I'm attempting to tally up all of my projects in the project table, with Project_Name being a column name. Below is the code I've tested: <?php $sql = "SELECT COUNT(*) FROM project"; $result = $connection->query($sql); if ($res ...

javascriptphphtmlmysqlcss

Excessive indentation detected within the website's formatting

There seems to be an issue with the mobile version of the website, possibly related to flexbox, SVG, or width settings that are unclear to me. Inspecting with Devtools reveals indents from the SVG and text itself. Check out the website here My goal is to ...

cssflexboxwidthbootstrap-5

How to insert a custom logo into a bootstrap navbar on a Ruby on Rails website

I have encountered a similar issue to this, but I haven't been able to resolve it. I am currently working on my first application using rails and bootstrap. I've successfully created a navbar with a name and two buttons (you can view the screensh ...

htmlcssruby-on-railsbootstrap-4navbar

The submit button appears to be malfunctioning after a PHP form is loaded via jQuery load

I currently am in the process of building my website. One issue I am encountering is with the packages page. Upon clicking on the packages menu item, a jQuery load triggers to load a PHP file named wrap2.php. The wrap2 page consists of a large form with m ...

phpjqueryhtml

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

I am working on an HTML page which has a form with various tags such as checkboxes, dropdowns, and more. When a button is clicked, I want to display the same form as plain text in a popup using jQuery dialog. Currently, I have managed to show the form in ...

javascriptjqueryhtmlcssforms

Instructions on utilizing *ngFor for every category I have

Seeking assistance with a specific issue. I currently have four labeled tabs, each containing projects. My goal is to ensure that when I save a project, it remains in the same tab where I initiated the save operation, rather than appearing across all tabs. ...

htmlcssangulartypescript