Organize the flexbox order: I would like the box to be positioned below an element that is not a direct sibling

Is there a way to ensure that the yellow box is placed below the blue box on smaller screen sizes?

I have realized that since the yellow box is not a sibling to the other boxes, it does not behave as expected. How can I rectify this issue?

Link to JSFiddle

.container1 {
  display: flex;
  flex-flow: column;
}

.container2 {
  display: flex;
  flex-flow: row;
}

.box {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
}

#b1 {
  background-color: red;
}

#b2 {
  background-color: blue;
}

#b3 {
  background-color: green;
}

#b4 {
  background-color: yellow;
}

@media screen and (max-width:500px) {
.container2 {
  display: flex;
  flex-flow: column;
}
  #b1 {
    order: 1;
    -webkit-order: 1;
  }

  #b2 {
    order: 2;
    -webkit-order: 2;
  }

  #b3 {
    order: 4;
    -webkit-order: 4;
  }

  #b4 {
    order: 3;
    -webkit-order: 3
  }
}
<div class="container1">
  <div class="container2">
    <div class="box" id="b1"></div>
    <div class="box" id="b2"></div>
    <div class="box" id="b3"></div>
  </div>
  <div class="box" id="b4"></div>
</div>

In order to comply with SO guidelines, I am adding more text here. But I believe all relevant information has been covered in the above content :)

htmlcssflexbox

Answer №1

When using the order property, it's important to note that the order is based on the parent container and not the DOM structure.

In CSS, the order property dictates how flex items are arranged within their flex container. Items are arranged in ascending order of the specified order value. Items with the same order value are arranged based on their order in the source code.

MDN - "order"

However, achieving a specific order can be done using CSS Grid.

Check out this Codepen Demo for reference

.container {
  padding: 5px;
  display: grid;
  width: 500px;
  margin: 1em auto;
  grid-auto-columns: 50px;
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.box {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

#b1 {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 2;
}

#b2 {
  background-color: blue;
  grid-column-start: 2;
  grid-column-end: 3;
}

#b3 {
  background-color: green;
  grid-column-start: 3;
  grid-column-end: 4;
}

#b4 {
  background-color: yellow;
  grid-column-start: 1;
  grid-column-end: 2;
}

@media screen and (max-width: 500px) {
  #b1,
  #b2,
  #b3,
  #b4 {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  #b3 {
    grid-row-start: 4;
    grid-row-end: 5;
  }
  #b4 {
    grid-row-start: 3;
    grid-row-end: 4;
  }
}
<div class="container">
  <div class="box" id="b1"></div>
  <div class="box" id="b2"></div>
  <div class="box" id="b3"></div>
  <div class="box" id="b4"></div>
</div>

There's a possibility of achieving similar results in Flexbox as well, but at present, support for all necessary properties may be limited. Currently, it seems to work only in Firefox according to the latest information available.

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

CSS loop to centrally align divs

I am facing an issue where I want to center the divs in a panel. Each div is generated within a for-each-loop inside the panel. However, the problem arises when they are displayed as block elements: https://i.sstatic.net/RvnlX.jpg When I try floating them ...

htmlcssprimefaces

Jquery method to extract and modify text within an HTML opening tag

As an example, let's consider <img onclick="remClicked(this)" src="~/images/chrest.png" /> I am interested in replacing onclick="remClicked(this)" src="~/images/chrest.png" with another text using either javascript or jquery. Is this possible? ...

javascriptjqueryhtmlasp.net-mvc

Nodemailer is failing to send emails on Heroku

Recently, I encountered an issue that has been puzzling me. I use cloud9 for work and nodemailer works perfectly fine, sending all emails from a form I created. However, when I deployed a small server to Heroku with just a change in an environmental vari ...

javascripthtmlnpm

How can I use CSS to place a div at the bottom of its container?

I am trying to figure out how to use CSS to position a div at the bottom of its container, but the size of the container is not fixed. Can anyone provide some guidance on this issue? Thank you in advance for helping me solve this problem. You can check o ...

htmlcssbootstrap-4

What is the process for accessing an established REST API through an HTML form?

Currently, I have set up a REST API to store data in a Mongo database through my mobile application. Now, I want to display the data from the database on a webpage. Although I already have the necessary functionality (the login request for my mobile app), ...

javascripthtmlnode.jsmongodbrest

Bootstrap4: combining card header and navigation into a single row

How can we use Bootstrap 4 to position navigation and text within a Card Header in order to have them display on a single row? <div class="card"> <div class="card-header"> Heading <ul class="nav nav-pills card-header-pills"> ...

javascriptcssbootstrap-4navigation

Angular 2 utilizes a "template" for ng-content that can be incorporated within a component loop

I am currently developing a component that will perform certain actions and iterate over a set of results. My goal is to have the ability to specify a "template" for the items in the result set. Here is the concept I have in mind: <search-field> ...

htmlangular

Retrieve the content of the second <li> element using jQuery

Seeking assistance with replacing the separator symbol in a given structure. In order to proceed, I first need to identify its position. Can anyone offer guidance on how to do this? Below is the structure in question: <div> <ul> ...

jquerycsshtml-lists

Summing Up Values in Jquery Loop Through Table Rows

I am facing a challenge with a table that contains a textfield for inputting numeric values. This textfield is part of a repeated row table, with the ID 'amount'. My goal is to calculate the sum of all values entered in the textfields with the ID ...

javascriptjqueryhtml

Issues with ontimeupdate event not triggering in Chrome for HTML5 audio files

After creating an HTML5 audio element and setting a listener for when its time updates, I have run into an issue where the ontimeupdate function does not fire in Chrome, including Chrome on Android. The audio plays without any issues in other browsers. va ...

javascriptandroidhtmlgoogle-chromeaudio

What are some creative ways to design my dropdown menu?

I recently completed a tutorial on creating my own custom drop down menu. However, I am struggling to style the submenus. I can't seem to locate the correct class to modify it. My goal is to have the sub menus display in a single line and within a box ...

cssdrop-down-menumenu

Gather information using HTMLParser

<tr> <td style="color: #0000FF;text-align: center"><p>Sam<br/>John<br/></p></td> </tr> Utilizing the python's HTMLParser module, I am attempting to retrieve the entries Sam and John from the provided ...

pythonhtmlhtml-parsinghtml-parser

Change the color of a specific day on the Arshaw Calendar using CSS

Can anyone help me with changing the color of the box in the month view in the arshaw calendar? I've been attempting to do so using this script, but my lack of expertise in javascript is proving to be a hurdle. The goal is for this script to be called ...

javascriptjquerycsscalendarfullcalendar

Enable the use of CKEditor4 inline feature on various inline elements such as span and other

Is it possible to enable the CKEditor4 inline/contenteditable editing feature on <span> and other inline elements? I have searched the official documentation but cannot find any information on how to do this. Here is the markup I am using: <span ...

javascripthtmlckeditorcontenteditableinline-editing

Does the parent container require a defined width?

I'm working with a parent div that contains three inner child divs. Here's the structure: <div style="width:900px;"> <div style="width:300px;">somedata</div> <div style="width:300px;">somedata</div> <div ...

javascripthtmlcssuser-interfacestyles

Tips for customizing the background of form inputs in React-Bootstrap

Currently, I have a next.js project with react-bootstrap. I am attempting to change the default blueish gray background color (#e8f0fe or rgb(232, 240, 254)) that bootstrap uses for form inputs to white. To achieve this, I am customizing the bootstrap var ...

cssbootstrap-4sassnext.jsreact-bootstrap

individual elements displayed sequentially within the same block with variable naming

My code caters to both mobile and desktop versions, with the same elements in the FORM. However, only one block of code is visible at a time depending on the screen size, with one set to display: none. <div id="desktop"> <div id="content"> ...

javascripthtmlcss

Adding extra space on a Bootstrap 4 flex container with full height

I need help creating a fixed div with 100% height and vertically centered alignment using Bootstrap 4. I've achieved everything except adding padding. When I try to add padding to the child div, the content overflows off the screen. I even attempted ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Is there a way to extract a variable value from an external webpage in order to manipulate

Although I am not well-versed in PHP, I believe it may be the most suitable solution for achieving my goal. I want to extract the value of a variable from an external page in order to process it for generating graphs and statistics on my own webpage. The s ...

phphtmlvariablespostget

The art of layering images: How to stack one image on top of another

I am in the process of trying to place a logo on top of an image, but I have been unsuccessful so far. Rather than overlapping, the second image is appearing next to the first one. Can you help me figure out how to solve this issue? This is for a website ...

htmlcss