Changing the positioning of divisions based on screen size, transitioning from 1200px width and larger to mobile devices

I'm working on creating a layout with two different displays for larger screens (992-1200) and mobile devices. Here is my rough drawing and demo links:

For screen sizes 992 and up: https://i.sstatic.net/mztjL.png

For mobile: Display should look like this: https://i.sstatic.net/OOCMl.png

I have a working version for screen size 992 and above using Bootstrap on Codeply (link provided). However, I'm struggling to achieve the desired mobile view without additional CSS.

Do I need separate CSS for different screen sizes? Can this be done solely through Bootstrap without extra styling?

Are there better approaches for achieving this layout? Any advice would be greatly appreciated!

csstwitter-bootstrapbootstrap-4

Answer №1

Your code here is applying the order class on the image container.

I have also added the row class to your existing classes as shown below:

<div class="row col-4 col-md-12 col-lg-12 d-flex justify-content-between mx-0" style="background: pink">
     <!--New class applied: order-3 order-sm-1 col-12, modified col-sm-12 for col-md-12 -->
     <div class="order-3 order-sm-1 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: red">

DEMO:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row w-75 mx-auto">
        <div class="row col-4 col-md-12 col-lg-12 d-flex justify-content-between mx-0" style="background: pink">
            <div class="order-3 order-md-1 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: red">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is an icon
            </div>
            <div class="order-1 order-md-2 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: orange">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is an icon
            </div>
            <div class="order-4 order-md-3 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: green">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is an icon
            </div>
            <div class="order-2 order-md-4 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: silver">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is an icon
            </div>            
        </div>
        <div class="row offset-4 col-4 offset-md-0 col-md-12 col-lg-12 d-flex justify-content-between" style="background: yellow">
            <div class="order-2 order-md-1 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: blue">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is an icon
            </div>
            <div class="order-4 order-md-2 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: lime">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is an icon
            </div>
            <div class="order-1 order-md-3 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: lavender">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is an icon
            </div>
            <div class="order-3 order-md-4 col-12 col-md-2 d-flex justify-content-center flex-column align-items-center text-center" style="background: gold">
                    <img src="https://icon-library.com/images/copy-link-icon/copy-link-icon-3.jpg" width="32" height="32" />
                    This is an icon
            </div>                
        </div>
    </div>
</div>

Answer №2

Give this a shot for designing a responsive webpage.

.content {
  width: 100%;
  height: 200px;
  color: #fff;
  text-align: center;
  margin: 1.2rem auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-dark">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-danger">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-primary">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-warning">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-secondary">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-success">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-dark">

      </div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-lg-3">
    <div class="col-md-12">
      <div class="content text-center bg-danger">

      </div>
    </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

The issue of the background image not updating with jQuery persists in Internet Explorer 11

Hello everyone, I am facing an issue where I am trying to change the background image of a div using jQuery on click. The code I have written works perfectly on all browsers except for IE. Can someone please provide me with some guidance or help on how to ...

javascriptjqueryhtmlcss

Address the underlying issues with the background

I am working on an app and I want to include a fixed background image. I am using HTML5, CSS3, and JavaScript for this project. I have applied the CSS code to set the background image as fixed: body{ background:#1F1F1F url(../assets/bg.png) fixed;} Ev ...

htmlcss

Adding a class to a Vue component using the $refs property

I am facing an issue where I need to add dynamic class names to various Vue components based on their reference names listed in a configuration file. Manually adding classes to each component is not feasible due to the large number of components. To addre ...

javascripthtmlcssvue.js

Center-align the text in the navigation bar

Is there a way to center the text within my navigation and ensure it remains centered across all resolutions (left at 1920x1080, centered at 1420)? I understand that much of this code is inefficient and not working correctly, but for now I just want to fi ...

htmlcsswordpressnavigation

AngularJS: Creating a dual-column layout with alternating styles

Struggling to create a two-column layout that repeats in AngularJS using a JSON object of image data. I'm aiming for a display of images in a side-by-side format, but my odd/even logic seems to be off no matter what adjustments I make. Can anyone poin ...

cssangularjsonsen-uiresponsive

Make sure to align images and comments seamlessly on your website just like in the comment section of YouTube

Looking for help aligning an image and two spans in one row <img src="../images/profile/profile.png" class="img" /> <span class="name">First Name</span> <span class="comment"> This is simply dumm ...

csshtml

Utilizing Material-UI CssBaseline with React JS

Looking to enhance the consistency of my new React app with a sleek design using Material-UI. Want it to be easy to maintain, so decided to start with the default theme. Trying out cssBaseline from Material-UI but running into issues. Not very familiar wit ...

cssreactjsmaterial-ui

A CSS hack for showcasing numerous div elements

I am looking to divide my window into two equal parts, with the same height but each taking up 50% of the width. Here is the CSS I used: .container { display: flex; height : 100%; } .column { flex: 1; height : 100%; } .column-one ...

htmlcssflexbox

Modify the CSS of the gauge element without causing any issues

I am facing an issue while trying to resize this gauge element. Whenever I attempt to modify the container class to make it smaller, the entire gauge ends up distorting. Changing the position to relative seems to cause glitches at the edge of the gauge. An ...

cssvuejs2

Striking a line through the hyperlink tag

I am attempting to create a crossed-out line above the content of an a tag for decorative purposes. The line should stretch across the entire width without intersecting with the actual text within the tag. This is my desired outcome: https://i.sstatic.ne ...

htmlcss

What are the best practices for preloading images, JavaScript, and CSS files?

Back in the late 90's, I was really passionate about creating websites from scratch. However, as I dove back into web development recently, I realized how much the landscape has changed since then. As more of a designer than a developer, I opted to us ...

phphtmlcss

Incorporate dynamic HTML into Angular by adding CSS styling

Just starting out with Angular and have limited front-end experience. I'm feeling a bit lost on how to proceed. Currently, I have a mat-table with a static datasource (will connect to a database in the future), and I need to dynamically change the bac ...

htmlcssangular

Conceal the block quotes while substituting with a newline

My HTML page contains numerous comments enclosed in blockquotes. I attempted to implement a feature that allows users to hide all the comments with just one click by using the following JavaScript code: const blockQuotes = document.getElementsByTagName(& ...

javascriptcss

Error: The @use directive must come before any other rules in Angular

Error message: Issue: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error Details: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) ...

cssangulartypescriptsass

Is there a way to stack multiple Divs on top of each other using Float instead of relying on absolute positioning?

I've decided to revamp my approach and transition from using absolute positions to utilizing floats for positioning elements the way I desire. Now the challenge lies in figuring out how to float multiple divs on top of each other, allowing users to s ...

htmlcss

Customizing the Height of Elements in Bootstrap

When working with two columns in bootstrap, let's say one column has a height of 800 PX. If you want the text in the second column to start after 200 PX, is there a way to achieve this without using padding or margin? Are there any predefined classes ...

htmlcssweblayoutbootstrap-4

Ensure that only one button from the collection is activated

One of the features on my website includes 3 blocks with buttons. These buttons trigger a change in the displayed picture when clicked. However, it is crucial to ensure that when a new track is activated, the previous button returns to its original state. ...

javascripthtmlcssbutton

Creating an Online Store with Python and Django for Server-side Development

Looking to create a dynamic E-commerce platform with Bootstrap, HTML, CSS, and JavaScript for the frontend, along with Python, Django, and MongoDB for the backend. Can someone provide me with step-by-step guidance on crafting code files for each language a ...

pythonhtmldjangobootstrap-4

Tools for generating Xpath or CSS selectors on Firefox and Chrome browsers

Struggling with finding helpful plugins for my Selenium webdriver development. Firebug for FF and Selenium IDE are not working for me. Despite trying multiple plugins for both FF & Chrome, I can't find anything to generate xpath or CSS strings. Lookin ...

cssseleniumuser-interfacexpathspy

What is the best way to split two divs in this manner?

Is there a way to split two divs like this in such a manner using TailwindCSS? Alternatively, what would be the CSS code for dividing these two divs? I am struggling with this concept and cannot wrap my head around how it can possibly be achieved. ...

htmlcssmaterial-uicss-selectorstailwind-css