Differentiating between CSS layouts for mobile and desktop devices

Is there a way to create this specific layout using CSS?

It's important to note that the order of elements should change on mobile compared to desktop!

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

Currently I'm working with bootstrap 4. The code below "works" for desktop but not for mobile.

<div class="container">
    <div class="row">

        <div class="col-md-4">    
            <div class="a">
                A
            </div>
            <div class="d">
                D
            </div>
        </div>

        <div class="col-md-8">
            <div class="b">
                B
            </div>
            <div class="c">
                C
            </div>
        </div>

    </div>
</div>

How can I achieve the desired layout? I am considering solutions involving:

  • Bootstrap 4
  • Flexbox
  • CSS Grid
csstwitter-bootstrapflexboxbootstrap-4

Answer №1

If you're looking to achieve a specific order and seamless "fit" between columns in Bootstrap 4, one method is to disable flexbox and utilize floats for the desktop layout...

Creating a "Fit" Masonry Layout with Floats and Reordering

<div class="container">
    <div class="row no-gutters d-block">
        <div class="col-md-4 float-left">    
            <div class="a">
                A
            </div>
        </div>
        <div class="col-md-8 float-left">
            <div class="b">
                B
            </div>
        </div>
        <div class="col-md-8 float-right">
            <div class="c">
                C
            </div>
        </div>
        <div class="col-md-4 float-left">    
            <div class="d">
                D
            </div>
        </div>
    </div>
</div>

Check out the live demo here

Implementing a Same Heights Layout with Flexbox and Reordering

   <div class="row text-white no-gutters">
        <div class="col-md-4">
            <div class="a">
                A
            </div>
        </div>
        <div class="col-md-8">
            <div class="b">
                B
            </div>
        </div>
        <div class="col-md-4 order-last order-md-0">
            <div class="d">
                D
            </div>
        </div>
        <div class="col-md-8">
            <div class="c">
                C
            </div>
        </div>
    </div>

View the demonstration of this layout here (option 2)

For more information on creating rows with columns of different heights in Bootstrap, check out this related article

Answer №2

If you're already utilizing Bootstrap, incorporating pushes and pulls can help you achieve the desired layout:

<div class="container">
  <div class="row">
    <div class="a col-md-4">
      A
    </div>
    <div class="b col-md-8">
      B
    </div>
    <div class="c col-md-8 col-md-push-4">
      C
    </div>
    <div class="d col-md-4 col-md-pull-8">
      D
    </div>
  </div>
</div>

Take a look at this example: https://codepen.io/bretteast/pen/VxKyLX

Also, refer to these documents for more information: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

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

Managing the height of a TextArea within a Flexbox environment

After exploring various methods for achieving auto-height in a textarea, I decided to go with the contenteditable approach as it seemed cleaner to me. However, while it worked perfectly on its own, it failed when placed within flexbox containers. I experi ...

csscross-browserflexbox

Transforming HTML into a Console Experience (Angular 16)

I'm experimenting with creating a console/CLI style experience using HTML. The goal is to have the input fixed at the bottom of the window, while commands and output rise up from the bottom and eventually disappear off the top of the screen, enabling ...

javascripthtmlcssangular

Create a stylish div slider with interactive menu using Jquery

Currently, I am in need of creating a slider for a <div>. However, most plugins are too large for my needs, so I am attempting to develop my own jQuery script since I only require the basic functionality. Admittedly, I am a novice in jQuery and could ...

javascriptjqueryhtmlcss

Implement Offcanvas feature with Bootstrap 3 Navbar set to Fixed Top position

I am in the process of creating a website that will feature a large menu. However, I am not a fan of the collapsed menu that comes with BS3. Instead, I would like to implement a drawer or off-canvas menu similar to the one showcased in BS3's offcanvas ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adding a background color with a background image layered underneath it in CSS - here's how!

Looking to set a background color for a div, with a background image on the bottom of the same div. However, I need the background color to stop once the background image begins. Check out the example image below: ...

htmlcss

Position the image to the right side of the Bootstrap Card

When working within a Bootstrap Card, I am trying to position the image to the right of the title and text, but it currently appears below them. How can I make the image align all the way to the right of the screen, next to the title and text? HTML: <d ...

htmlcssbootstrap-4frontendbootstrap-5

What is causing this array to automatically alter its value?

How can I prevent A from changing its value when I only want to modify Q in the first loop of this html/javascript code? Why does A change even though I am only changing Q? What steps can I take to avoid A from changing? <!DOCTYPE html> <html& ...

javascripthtmlcssarraysloops

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

htmlcss

What could be causing the slight pause in my CSS3 animation at each keyframe percentage range?

I'm currently working on an animation for a sailing ship, but I'm encountering some issues with its smoothness. Whenever I make changes in the @keyframes, the animation stops abruptly. The movement involves using transform:rotate(-5deg) and then ...

css

Enhancing CSS to create a more visually appealing loading spinner

I am completely new to CSS and I've been attempting to customize the CSS in the angular-loading-bar module to create a more visually appealing loading spinner. Currently, I have a square spinner that rotates in the center of the page, with a black bor ...

cssangularjsspinnerloading

Setting up the CSS loader in a Vue.js project using webpack

I am currently working on a new vue-cli project and have successfully installed the Pure.CSS framework using npm install purecss --save. However, I am struggling to seamlessly integrate, import, or load the css framework into my project. I am unsure of whe ...

csswebpackvue.jsnode-modulesvue-cli

What is the largest image dimension allowed for website use?

What are the dimensions in pixels and file size in MB? I've been curious about this for a while, appreciate any insights! ...

htmlcssimage

What is the name of the syntax highlighting plugin utilized by the Bulma CSS framework?

Does anyone know the name of the code highlighter plugin that is featured on bulma.io? I have tried looking through all sources and scripts, but I can't seem to find the plugin's name. Attached is a screenshot for reference: https://i.sstatic.n ...

htmlcssbulma

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...

javascripthtmlcssweb-componentshadow-dom

Padding in Bootstrap 4 columns in a vertical alignment when breaking the layout

I created a customized form-group to accommodate both large and small screens. The structure looks like this: <div class="form-group row"> @Html.LabelFor(model => model.ValidFrom, "Valid from", htmlAttributes: new { @class = "col-lg-3 ...

cssbootstrap-4

Occasional jquery issue causing font to render incorrectly within iframe

Currently facing a bug that needs resolution, the issue has been identified but unsure of the solution. An iFrame is loaded with content via jQuery like this: var content = {{ json_encode($template) }}; $('#preview-iframe').contents().find(&apo ...

javascriptjqueryhtmlcss

Load the React chunk CSS dynamically to optimize performance and only when it is necessary

After running an audit, Lighthouse is advising me to "Defer unused CSS" for my React app. Despite implementing code splitting and having separate CSS files for each chunk, the suggestion persists. One particular example highlighted by Lighthouse is the foo ...

cssreactjsoptimizationlazy-loadingcreate-react-app

The html input box's ability to handle overflow situations

Currently, I am working on creating a form that allows users to update data. <dl> <dt>Medical Needs:</dt> <dd class="med_needs" style="height:60px;overflow:auto"> <input type = "text" id="med_needs"name ="med_nee ...

htmlcss

Utilizing flexbox to align a horizontal menu

I have been working on creating a fixed menu using flexbox. Within my navigation bar, I have set up 2 divs. The first one is supposed to contain the logo, and the second one is for the menu (utilizing the display:flex property). However, I am facing an iss ...

htmlcssflexbox

Error in Formatting Labels in CSS

I currently have a form with textboxes that include validation. Everything works smoothly when clicking the save button for the first time, but if we fill out the textboxes and then remove the text, an error message is displayed on the textboxes. You can v ...

javascriptcss