Organizing elements in flexbox with Bootstrap: A guide to wrapping order and

While I am using bootstrap 4 to build a top nav, this question is not necessarily specific to bootstrap. The challenge I am facing involves controlling the wrapping behavior of components in the top nav as the screen width changes.

I am struggling with achieving a non-default wrapping behavior that I have in mind, and I am uncertain if it is even possible or how to go about it.

In a wide screen view, it should look like this:
https://i.sstatic.net/E9ma1.png
Components A and B are left aligned, while C, D, and E are right aligned.


As the screen narrows slightly, it should appear as follows:
https://i.sstatic.net/E7RrI.png


Further narrowing should result in this layout:
https://i.sstatic.net/z13f4.png


And when narrowed more:
https://i.sstatic.net/PoINK.png

I am unsure how to achieve the desired wrapping order and justification. I have attempted grouping various components together with divs but nothing seems to work correctly.

twitter-bootstrapcssflexboxbootstrap-4

Answer №1

To begin with mobile optimization, utilize the offset-* and order-* classes as needed. Remember to reset offset-* and order-* back to *-0 for each breakpoint.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-3 order-1 order-sm-1 order-md-1 order-lg-1 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> A</div>
    </div>
    <div class="col-1 order-3 order-sm-4 order-md-5 order-lg-2  mb-3 ">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> B</div>
    </div>
    <div class="col-5 order-5 order-sm-5 order-md-2 order-lg-3 offset-7 offset-sm-6 offset-md-1 offset-lg-0 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> C</div>
    </div>
    <div class="col-2 order-4 order-sm-2 order-md-3 order-lg-4 offset-9 offset-sm-6 offset-md-0 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> D</div>
    </div>
    <div class="col-1 order-2 order-sm-3 order-md-4 order-lg-5 offset-8 offset-sm-0 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> E</div>
    </div>
  </div>
</div>

Breakpoint Adjustments

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<h1 class="text-center m-3">xs</h1>
...
<h1 class="text-center m-3">sm</h1>
...
<h1 class="text-center m-3">md</h1>
...
<h1 class="text-center m-3">Lg</h1>
...

If the col-* and offset-* classes need adjusting from the examples provided, make the necessary modifications accordingly.

For a full-screen view or access the code snippets, visit these links:

  1. https://codepen.io/anon/pen/rvorge
  2. https://codepen.io/anon/pen/MGZBNw

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

Menu bar does not extend fully across the screen

I'm struggling to get my navigation bar to cover the entire right side as seen in the picture. I've tried everything and still can't seem to figure it out. Any suggestions would be greatly appreciated. <!doctype html> <html lang="e ...

htmlcss

A Spring application deploying a WAR file encounters a 404 error when attempting to access the

Working on a Java EE application using Spring and Maven, the project structure follows the typical hierarchy. Here is a glimpse of it: MyApplication src main webapp WEB-INF layout ...

htmlcssjspmaven

launch active link in pop-up dialog

I'm currently working on an Instagram iframe that fetches 9 random images with href links for pictures and spans with the same background. My goal is to display these images in a popup gallery. I've tried using Bootstrap for the popup, but I&apos ...

javascriptjqueryhtmlcsstwitter-bootstrap

In IE8, a border is applied to the max-width property when the width is set to

I'm attempting to design a box that adjusts in size according to the parent container, utilizing a mix of max-width and width:100%. With this setup, the box's width is determined by the max-width property, ensuring it shrinks within its boundari ...

htmlinternet-explorer-8css

Looking for a solution to adjust the barely visible menu items on my website's mobile version, after recent changes made by Weebly. How can I make them more noticeable and user-friendly?

A BIT OF HISTORY Some years back, I created my initial Weebly website for my business at www.smehelper.com. The mobile version used to look fantastic! CHANGES OVER TIME However... about a year ago, Weebly made some alterations (I'm not sure what exac ...

csscss-selectorsmenuitemhamburger-menuweebly

Clipping of the background image

http://jsfiddle.net/R82a4/ My attempt at achieving the desired result fell short: <div style="background-position: -50%; width: 100%; background-image: url('/assets/upload/stab/1/taccos.png'); background-repeat: no-repeat; background-size: 1 ...

htmlcss

issue with website layout due to HTML and CSS

I aligned my text within div tags. As I decrease the size of the page due to the site being responsive, the div tags also shrink, resulting in excessive white space between words. Is there a solution to address this issue? view image here Another concern ...

htmlcss

The functionality of Table 3 column is not compatible with Internet Explorer 8

In IE8, strict mode (as I am unable to use normal mode), the 3-column layout is not displaying correctly. The following link shows a two-column layout where the second div occupies the remaining space: http://jsfiddle.net/JWBgY/ However, in the three-col ...

htmlcssinternet-explorer-8

Unable to display Glyphicons in Angular web application

I'm currently enrolled in an online Angular course and I've noticed that the "glyphicon" classes used by the instructor are not working as expected for me. It's worth mentioning that this course is about 3 years old, so there might have been ...

angulartypescriptbootstrap-4

Tips for deleting a text node preceding a div element?

Here's the HTML code snippet I am currently working with: <div id="wrapper"> <div id="some-id"></div> "this is some texxt" <div id="some-id-2"></div> </div> Is there a way to eliminate the text using CSS? ...

htmlcss

Using jQuery to toggle sliding the information above a div

I am facing an issue with my customized sliding menu. The menu slides over the image but not over the content-div, pushing it aside. I have tried to fix this problem but haven't found a solution yet. My goal is for the menu to slide over all divs and ...

javascriptjqueryhtmlcss

Foundation Framework sidebar by Zurb

My current dilemma involves the zurb foundation framework, specifically with the .row class being set to a max-width of 61.25em, which is equivalent to 980px in width. The problem I am facing is that when I resize the browser and it reaches 1024px wide, t ...

htmlcssresponsive-designzurb-foundation

Is it feasible to navigate through submenus using only the [Tab] key in CSS?

Is there a way to activate a submenu in a styled menu using only the [Tab] key so that the submenu becomes visible? I attempted to use the :focus pseudo-class ul li a:focus + ul li a ... and when t ...

htmlcssfocusaccessibility

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

javascriptcssreactjsreact-native

Is there a way to adjust the transparency of specific text when clicking on a different div?

How can I display a line of text when the "Contact Us" button is clicked on a practice website, similar to this: https://i.sstatic.net/MgbYQ.png I have set the current opacity of the submit message to 0 so it is hidden, but is there a way to change its o ...

jquerycss

Avoiding conflicts with original CSS when implementing Mobile-First Media Queries

Suppose I have this CSS code: .about_text { font-weight: 300; font-size: 1.125rem; } Then, I add a media query like this: @media screen and (min-width: 64em) { .about_text { font-weight: 600; font-size: 1.500rem; } } Despite ...

csswordpressresponsive-designlessmedia-queries

Switch from hover effects to CSS3 animations triggered on page load

I found this code snippet on https://codepen.io/chriscoyier/pen/NWNJpdJ. Can someone help me modify it to change the counter on page load instead of hover? Also, I want the counter to stop at 100 without resetting back to 0. @property --num { syntax: ...

htmlcss

Let the numerical tally commence once we arrive at said juncture

Our script is designed to count numbers, but the issue arises when the page is refreshed and the number count starts over. We want the count to start only when a user reaches that specific number or point. Css:- .office{padding-right: 5px; padding-left: ...

javascriptjqueryhtmlcss

Issues Arise with Bootstrap Side Navigation Tab Content Navigation

As someone new to web development, I am currently working on a web app and struggling with the page design. Specifically, I am attempting to create a fixed side navbar with content displayed in the second column of a split row. Below is the code I have man ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

htmlcssgmailhtml-email