Creating adaptable breakpoints for content using Bootstrap or pure CSS

I'm trying to create a responsive layout using the Bootstrap "row" and "col" classes, but I'm having trouble figuring out how to structure the content. Here's what I mean:

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

This is my current HTML structure:

<div class="row">
    <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
        <section id="content1">
            Content 1
        </section>
    </div>

    <div class="col-lg-4 col-md-3 col-sm-4 col-xs-12">
        <section id="content2">
            Content 2
        </section>
    </div>

    <div class="col-lg-12 col-md-9 col-sm-8 col-xs-12">
        <section id="content3">
            Content 3
        </section>
    </div>
</div>

However, this code displays the content in reverse order below 768px screen width. So, Content 3 becomes Content 2 and vice versa.

htmlcssbootstrap-4responsive-designfrontend

Answer №1

If you want to implement the order property to control the sequence of your second and third elements, you can leverage Bootstrap 4's built-in ordering functionality by using the order- prefix. To achieve this, assign order-2 to the second <div> element and order-1 to the third one.

The code snippet below illustrates how this is done:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
    <section id="content1">
      Content 1
    </section>
  </div>

  <div class="col-lg-4 col-md-3 order-2 col-sm-4 col-xs-12">
    <section id="content2">
      Content 2
    </section>
  </div>

  <div class="col-lg-12 col-md-9 order-1 col-sm-8 col-xs-12">
    <section id="content3">
      Content 3
    </section>
  </div>
</div>

Answer №2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Fiddle</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12">
      Item 1
    </div>
    <div class="col-md-12 col-sm-8 order-md-4 order-sm-1">
      Item 3
    </div>
    <div class="col-md-4 col-sm-4 order-sm-2">
      Item 2
    </div>
  </div>
</div>
</body>
</html>

Alter the display sequence of specific flex elements using various order utilities. Bootstrap offers choices for setting an element as first or last, and also a reset to revert to DOM order.

https://getbootstrap.com/docs/4.0/utilities/flex/ Explore this link for more information

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

Eliminate all elements marked with a particular class when the user clicks outside of a

I am currently building upon a project that I previously started here. Essentially, what I'm doing is dynamically generating tooltip popups that appear next to a link when it is clicked. However, I now need these tooltips to close when any click even ...

javascriptjqueryhtmlcss

Is the PHP variable receiving a null value by the conclusion of the script?

I'm facing a puzzling issue that I just can't crack. Currently, I'm in the process of developing a blog and I've encountered an anomaly with a cookie-generated variable that holds a post ID. Strangely, when I reach the if(isset) stateme ...

phphtml

When choosing from multiple dropdown menus, the selected option should be hidden from the other dropdowns

I'm currently working on a project that involves designing a web form incorporating 3 select boxes with multiple questions. The concept is such that, if I choose the 1st Question from the 1st select drop-down, it should not be available in the 2nd sel ...

javascriptjqueryhtml

Scripting method to transfer multiple subdirectories using a cpanel.yml file (excluding the use of the wildcard)

I have been referring to the documentation found at My current issue is that when I try to copy my subfolders, it doesn't work properly unless I use a workaround. The only way I am able to achieve the desired outcome is by utilizing the following co ...

htmlbashgityamlcpanel

Manage the placement of elements using CSS

Having an issue here. The blue-colored elements are showing up vertically, but I want them to be displayed horizontally. I've tried various methods but haven't been able to solve the problem. Providing just the code for the items below due to len ...

htmlcss

Challenges with Media Queries post Integration of MUI Library in React

I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement ...

javascriptcssreactjsmaterial-ui

Is there a way to remove a specific row from both an HTML table and a MySQL database using CodeIgniter?

Just diving into CodeIgniter and successfully retrieved data from MySQL to display in an HTML table. Now, the challenge is to delete specific rows in MySQL. Imagine a scenario where there are 10 rows in the table, each accompanied by a checkbox, and a Del ...

phphtmlmysqlformscodeigniter

Minify and group options available for asset managers specifically designed for traditional HTML websites

My primary focus is on working with the CakePHP framework and utilizing a fantastic plugin that minifies and groups selected assets into a single file, reducing the number of HTTP requests needed for the entire site. Currently, I am collaborating with des ...

jqueryhtmlnode.jscsscakephp

The value attribute in the HTML input tag being dynamically increased by JavaScript

Hi there, can someone help me figure out how to save changes to the value attribute of an HTML input tag that is being incremented by JavaScript? Currently, every time I click on a specific element, the input field should increase by one. The problem is th ...

javascripthtml

Creating line breaks in Bootstrap input group formatting

My issue involves rows with checkboxes and labels, some of which are longer than others. When the browser is resized or viewed on a mobile device, the columns containing longer labels collapse to a second row while shorter labels stay beside their checkbox ...

htmlcsstwitter-bootstrap

Contrast the positions (offsets) of two elements

I am trying to determine if one element is positioned above another by comparing their offset positions. Specifically, I need to verify whether the me element is within the bounds of the screen element using their respective offset positions. HTML Code ...

javascriptjqueryhtml

Achieving the desired results through the utilization of CSS3 rather than relying on images

I am currently exploring the use of CSS3 to create a menu instead of relying on images over at . You can view my progress and code (including images and styles) here: Although I attempted to use CSS3 for the border shadow and matching the background of ...

htmlcss

What is the best way to save JavaScript array information in a database?

Currently working on developing an ecommerce website. My goal is to have two select tags, where the options in the second tag are dynamically populated based on the selection made in the first tag. For example, if "Electronics" is chosen in the first tag f ...

javascriptphphtmlsqlarrays

What is the best way to achieve a full width table in an HTML format on a smartphone browser?

Apologies for my limited English proficiency. I am currently working on creating a horizontal scrollable table in HTML. My goal is to make the width of the table span beyond the browser's viewing area, so that sticky cell functionality can be implem ...

javascriptjqueryhtmlcss

Differentiate the items within a list containing identical divs using JavaScript

Currently, I am expanding my knowledge in HTML, CSS, and JS by incorporating Angular and JQuery. In one of my projects, there is a div labeled "eventBoxes" where multiple divs known as "eventBox" can be added. I have created a template for the eventBox i ...

javascripthtmlangularjs

Struggling to make jQuery apply .css("display", "block") upon clicking a link

I am having trouble with getting jQuery to display CSS properties when a link is clicked on. After testing the CSS properties, I found that setting the display to "block" in the style sheet works as expected. However, if I set the initial CSS display to " ...

jqueryhtmlcss

The successful execution of $.ajax does not occur

Starting out with ajax, I wanted to create a simple add operation. Here is the code that I came up with: HTML: <!doctype html> <html> <head> <title>Add two numbers</title> <meta content="text/html;charset=utf-8" h ...

javascriptphpjqueryhtmlajax

What is the best way to achieve vertical text box scrolling in CSS and HTML overflow?

I'm having an issue with a text box I created and I couldn't find a solution elsewhere. Here is the CSS script for the text box: css: .cln{ top:220px; width:680px; height:350px; text-align:left; overflow:scroll; white-space: nowrap; overflow: ...

htmlcss

Hyperlinks are malfunctioning and the text cannot be highlighted

Here is my XML code: <!DOCTYPE HTML SYSTEM> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"></link> </head> <body> <div class="header"> <img id="circle" src="circle.png" ...

htmlcss

Choose a child using react material ui's makeStyles

Currently utilizing React and Material UI, I am attempting to use the nth-child selector with the MUI makeStyle function. However, it is not working as expected. Here are some screenshots for reference: https://i.sstatic.net/5dVhV.png https://i.sstatic.ne ...

cssreactjsmaterial-ui