BOOTSTRAP: changing the layout of panels in various sizes for mobile devices

I'm struggling with how to reorganize my panels on mobile devices. Each panel has a different size. Please refer to the attached screenshot for the page layout on large screens (col-lg):

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

EDIT: The layout on large screens looks fine, as I prefer not to have any gaps between rows due to varying panel heights.

However, when viewing on a mobile device (col-xs), the order is currently:

1st panel
4th panel
7th panel
2nd panel
5th panel
3rd panel
6th panel

Please see the image below of the current mobile screen layout:

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

I would like to rearrange the panel locations on mobile (col-xs) to follow this sequence:
1st panel
2nd panel
3rd panel
4th panel
7th panel
5th panel
6th panel

Below is a snippet of the code that I am using:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
crossorigin="anonymous">
</head>
<body>
<div class="container">

<!-- 1st panel -->
<div class="col-lg-4">
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">1st</h3>
  </div>
  <div class="panel-body">
    1st panel<br>
    1st panel<br>
    1st panel
  </div>
</div>
<!-- 4th panel -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">4th</h3>
  </div>
  <div class="panel-body">
4th panel<br>
4th panel<br>
4th panel<br>
4th panel<br>
  </div>
</div>
<!-- 7th panel -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">7th</h3>
  </div>
  <div class="panel-body">
7th panel<br>
7th panel<br>
7th panel<br>
7th panel<br>
  </div>
</div>
</div>


<!-- 2nd panel -->
<div class="col-lg-4">
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">2nd</h3>
  </div>
  <div class="panel-body">
    2nd panel<br>
    2nd panel<br>
    2nd panel<br>
    2nd panel<br>
    2nd panel<br>
    2nd panel    
  </div>
</div>
<!-- 5th panel -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">5th</h3>
  </div>
  <div class="panel-body">
5th panel<br>
5th panel<br>
5th panel<br>
5th panel<br>
  </div>
</div>
</div>

<!-- 3rd panel -->
<div class="col-lg-4">
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">3rd</h3>
  </div>
  <div class="panel-body">
3rd panel<br>
3rd panel<br>
3rd panel  
  </div>
</div>
<!-- 6th panel -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">6th</h3>
  </div>
  <div class="panel-body">
6th panel<br>
6th panel<br>
6th panel<br>
6th panel<br>
  </div>
</div>
</div>

</div>
</body>
</html>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Ensure to adhere to the Bootstrap grid system and its various options. Utilizing these tools should help you find a solution to your issue.

Access Grid Options Here

Explore the Bootstrap Grid System Here

Take advantage of the predefined sizes for different devices to make every div and element compatible with all screen sizes.

Answer №2

If you're looking to create different layouts for large devices and extra-small devices, it's necessary to use two separate sets of codes. Since the order of "div"s is changing, the grid system won't be helpful in this case.

In Bootstrap, you have the option to pull or push columns but rows cannot be rearranged based on different devices.

To achieve the desired specification, one approach is to duplicate the code and apply visibility filtering-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
        integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
        crossorigin="anonymous">
    </head>
    <body>
    <div class="container">

<!-- Only visible in large devices --> 
<!-- 1st panel -->      
            <div class="col-lg-4 hidden-md hidden-sm hidden-xs">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">1st</h3>
                  </div>
                  <div class="panel-body">
                    1st panel<br>
                    1st panel<br>
                    1st panel
                  </div>
                </div>

                <!-- Code continues for large devices -->

            </div>

            <!-- Code repeats with adjustments for large devices and mobile view -->

    </div>
    </body>
</html>

Answer №3

If this layout fits your design, you could consider implementing something along these lines:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
        integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
        crossorigin="anonymous">
    </head>
    <body>
    <div class="container">

<!-- 1st panel -->      
<div class="row">
            <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">1st</h3>
                  </div>
                  <div class="panel-body">
                    1st panel<br>
                    1st panel<br>
                    1st panel
                  </div>
                </div>
                        </div>
    <div class="col-lg-4">
<!-- 4th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">2nd</h3>
                  </div>
                  <div class="panel-body">
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel    
                  </div>
                </div>  
    </div>
<!-- 7th panel -->  <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">3rd</h3>
                  </div>
                  <div class="panel-body">
                    3rd panel<br>
                    3rd panel<br>
                    3rd panel<br>
                    3rd panel<br>
                  </div>
                </div>
</div>
            </div>
<div class="row">

                <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">4th</h3>
                  </div>
                  <div class="panel-body">
                    4th panel<br>
                    4th panel<br>
                    4th panel
                  </div>
                </div>
                        </div>
    <div class="col-lg-4">
<!-- 4th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">5th</h3>
                  </div>
                  <div class="panel-body">
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                  </div>
                </div>  
    </div>
<!-- 7th panel -->  <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">6th</h3>
                  </div>
                  <div class="panel-body">
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                  </div>
                </div>
</div>
</div>
<div class="row">

                <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">7st</h3>
                  </div>
                  <div class="panel-body">
                    7th panel<br>
                    7th panel<br>
                    7th panel
                  </div>
                </div>


</div>

        </div>          


</body>
</html>

Answer №4

To achieve the desired layout on medium-sized screens, I recommend grouping all your .panel elements inside a .col-md-12 div in descending order.

For larger screens, you can add a media query at the default Bootstrap col-lg-* breakpoint of 1200px. Use a flexbox layout with flex-direction set to row for a left-to-right display order on large screens.

Check out this example and explore fallback solutions for browsers that do not support flexbox:
can i use flexbox.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

@media (min-width: 1200px) {
  .lg-flex-row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .panel {
    flex: 0 1 32%;
  }
}
<div class="container">
  <div class="row">
    <!-- 1st panel -->
    <div class="col-md-12 lg-flex-row">

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">1st</h3>
        </div>
        <div class="panel-body">
          1st panel<br />
          1st panel<br />
          1st panel
        </div>
      </div>
      
      // Other panel examples continue here
  
    </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

What is the approach of Angular 2 in managing attributes formatted in camelCase?

Recently, I've been dedicating my time to a personal project centered around web components. In this endeavor, I have been exploring the development of my own data binding library. Progress has been made in creating key functionalities akin to those f ...

javascriptangular

Is there a way to simultaneously modify several data variables within a Chart.js label?

I'm currently working on dynamically updating a line chart with two data entry points using the variable name "data." Take a look at the code snippet below: var lion = new Chart(ctx2, { type: "line", data: { labels: ["Apr", "May", ...

javascriptchart.js

I am experiencing an issue where my application, built using NodeJS, Express, and Javascript, is failing to insert form data into the database despite

I am facing a challenge with my app's MVC design pattern where I am unable to insert form information into the corresponding table in the database. Despite installing the body-parser package via npm, the form is not functioning as expected. Can anyone ...

javascripthtmlnode.jsexpress

Updating the TextField in React Material UI based on the Slider value without affecting the Slider

Is there a way to update the value of a TextField based on the slider, while still allowing manual input in the TextField? I want the TextField to reflect changes from the slider but not vice versa. I attempted making the TextField a controlled component ...

javascriptreactjsformsmaterial-uislider

I encountered an issue with rendering static images when attempting to package my node-express app with pkg

Struggling to display an image from the public folder in my express app? I could use some guidance on configuring the path to properly render images or css files within the public folder when creating an executable file using pkg. Here's a snippet of ...

javascriptnode.jsexpresspackaging

Using HTML and CSS, create a layout with three columns where the side columns are flexible in width and the middle

Currently, I am facing an issue with the header design of my website. The layout consists of 3 columns of divs and my goal is to have a middle column with a fixed width of 980px. In addition, I want the left side of the header to span across the entire bro ...

htmlcsswidthfill

Puppeteer: Eliminate hyperlinks on webpage

I am currently using Node.js and Puppeteer to convert a webpage into a .pdf-file. Everything functions as expected, however, I need assistance in removing all the links on the page before converting it to a .pdf. This is necessary because the resulting .p ...

javascriptnode.jspuppeteer

Implementing Blob image rendering in Vue.js from a database

In my front-end development, I am utilizing Vue.js. On the backend, I have set up Node.js, Express, and PostgreSQL with Sequelize. One of the challenges I encountered involved storing an item in the database that includes a thumbnail image. Database Model ...

javascriptpostgresqlvue.jsblobsequelize.js

Having trouble pinpointing the issue with this particular if statement?

I am currently working on creating a form that compiles all entered data when the user fills out all fields. The form is connected to a PHP file and functions properly, but I encountered issues when implementing validation logic. The "Validation" section ...

javascriptphphtmlformsif-statement

Having trouble locating the OBJ file in your Three.js WebGL project?

I am attempting to load an obj file using Three.js, but despite following various tutorials and resources online, I am only met with a black screen and no error messages in the console. The console output from the LoadingManager indicates that the objects ...

javascriptthree.jssketchup

Switch language by entering a specific URL (VueJs)

I have successfully integrated localisation using vue-i18n. In my main.js file: import Vue from 'vue' import { i18n } from './plugins/i18n' import Cookie from "vue-cookie"; if (!Cookie.get('locale')) { Cookie.set(' ...

javascriptvue.jsvuejs2

What is the reason behind LESS displaying arithmetic operations as text instead of performing them?

Whilst composing the subsequent operations @a: 2px @variable: @a + 5; .margin-style{ margin-left: @variable; } The code above compiles into .margin-style{ margin-left: 2px + 5; } Rather than margin-left:7px; What could be causing this issue? ...

htmlcssless

The CSS background-image and background-color do not load on IE8

I have a specific style applied to a link: #block-menu-menu-top-menu a.contact-us-link { background-image: url("../images/top-menu-contact.png") no-repeat; background-color: none; height: 28px; text-indent: -9999px; width: 34px; } However, when ...

cssinternet-explorerinternet-explorer-8

Validating Cognito credentials on the server-side using Node.js

I am currently developing server-side login code for AWS Cognito. My main goal is to verify the existence of a user logging into the identity pool and retrieve the attributes associated with them. With email login, everything is running smoothly using the ...

javascriptnode.jsaws-lambdaamazon-cognitoaws-sdk

choose a unique jQuery id without any duplicates

Trying to implement a simple system comment feature similar to Facebook, but struggling with selecting the right ID for submission. The issue I'm facing is that the first form works correctly, but for subsequent forms, I always retrieve the data-id fr ...

javascriptjqueryajax

js.executeScript produces a Unexpected identifier error

Visit this link for proofs Running a script in the browser console on the specified page: let img = document.querySelector('.subscribe'), style = img.currentStyle || window.getComputedStyle(img, false), bi = style.backgroundImage.slice(4, -1).re ...

javascriptjavaseleniumselenium-webdriver

The Step-by-Step Guide to Deselecting an Angular Checkbox with a Button

I currently have a situation where I have three checkboxes labeled as parent 1, parent 2, and parent 3. Initially, when the page loads, parent 1 and parent 3 are checked by default, while parent 2 is unchecked. However, when I manually check parent 2 and c ...

javascriptangularbuttoncheckboxunchecked

Updating variable storage in React components

This is a project built with Next.js and React. Below is the folder structure: components > Navbar.js pages > index.js (/ route)(includes Navbar) > submitCollection.js (/submitCollection)(includes Navbar) The goal is to allow users to inpu ...

javascriptreactjsreact-routernext.jsuse-state

Unable to load files in Handlebars when using Node and Express

Currently, I am in the process of developing a Node/Express web application for basic CRUD operations. However, I am encountering difficulties incorporating Handlebars into my project. Whenever I attempt to utilize Handlebars, none of the stylesheets from ...

javascriptnode.jsexpresshandlebars.js

Effortlessly Transform HTML into Plain Text Using jQuery

If I wanted to create a feature on my website where users can input text into a text area and then convert it to HTML by clicking a button, how could I achieve that? I'm looking for functionality similar to what Wordpress offers, where users can enter ...

jqueryhtmltextconverters