Rearrange items vertically using Flexbox

Struggling to stack two items vertically using flexbox. Tried setting order number but nothing happened. Need .trail-title below .trail-items.

Any tips on how to rearrange them vertically with flexbox?

Check out my JSFiddle: https://jsfiddle.net/tb1sv7n8/15/

#flash-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  flex-direction: column;
}

.trail-items {
  order: 1;
  height: 1em;
}

.trail-title {
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>

htmlcssflexboxvertical-alignment

Answer №1

To simplify the process, it is easier to change the flex-direction from column to column-reverse rather than adjusting individual order values for each flex item. This change should be directly applied to the .tg-container for it to work on all flex items. Here is the optimized CSS:

#flash-breadcrumbs .tg-container {
  display: flex;
  -webkit-flex-flow: column-reverse wrap;
  flex-flow: column-reverse wrap;
}

.trail-items,
.trail-title {
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>

Answer №2

You've got the incorrect CSS selector! The flex container must be specified as #flash-breadcrumbs .tg-container in your code, but instead you have .tg-container as the child of #flash-breadcrumbs, which is the only flex item...

Make sure to set the order properties according to your requirements:

#flash-breadcrumbs .tg-container {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  flex-direction: column;
}

.trail-items {
  order: 1;
  height: 1em;
}

.trail-title {
  order: 2;
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>

Answer №3

To make the .trail-items div appear above the .trail-title, apply the flex property to the parent .tg-container div and set the order value of .trail-items to -1:

.tg-container {
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
}

.trail-items {
  order: -1;
  height: 1em;
}

.trail-title {
  height: 1em;
}

.breadcrumbs, .breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item">
        <span>This here is the trail: The Love of This</span>
      </li>
    </ul>
  </div>
</nav>

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

Running Javascript based on the output of PHP code

I have been working on my code with test.php that should trigger some Javascript when my PHP code, conditional.php, detects input and submits it. However, instead of executing the expected "Do Something in Javascript," it outputs "Not empty" instead. I fin ...

javascriptphphtmlajaxjson

Tips for updating web page content without losing any design elements or graphics

Seeking a way to update the content of a table on a page using JavaScript or jQuery without removing parts of the existing table. I have tried various commands like change(), replaceWith(), load(), and text(), but they all end up deleting some parts of the ...

javascriptjqueryhtml

Various formatting options on GitHub Pages

As a beginner in programming, I recently deployed my first project to github pages. However, I am facing two issues: While the desktop version of the site looks perfect, the cards on the home page appear unseparated on mobile and iPad devices. Despite try ...

htmlcssgithub-pages

What is the best way to store plain HTML text in a database?

Currently, I am working on PHP source code to insert the page created using Quill text editor. Although the text editor data insertion is working fine, it is not inserting plain text as desired. My goal is to insert HTML plain text instead. Below is the J ...

phphtmlmysqli

What is the best way to add a specific class to another class in my CSS code?

Is it possible to apply a CSS class defined in css1.css to another HTML class defined in css2.css? In css1.css: div.classPredefined { border: solid 1px #000; } In css2.css: div.newClass { background: #CCC; /*apply-class: classPredefined;*/ } Although ...

htmlcss

Vue's v-for modifies the initial element within the list

I currently have a vue pinia store called "cartStore": import { defineStore } from 'pinia' export const cartStore = defineStore('cart', { state: ()=>({ cart: [] }), actions:{ async updateQuantity(id,logged,inc){ ...

javascripthtmlvue.jsvuejs3

What is the best way to position this container in the center of the

Is there a way to perfectly center this container both vertically and horizontally? I've attempted the method below without success. Unsure of what is missing: HTML: <div class="box"> <p>This is a sentence.</p> </div> C ...

htmlcsscontainers

Setting wmode to 'opaque' while using Internet Explorer 9

Using wmode="opaque" for a Flash object works perfectly in Chrome but unfortunately, it does not work in IE9. Whenever I open a dialog window, the Flash video continues to display without dimming as intended. ...

htmlinternet-explorer-9flash

I am working on customizing my WordPress website using three.js to add a background with a wireframe effect. However, I am facing difficulties in placing a sphere at the end of each line

I have a beautiful turquoise diamond and I want to incorporate a directional camera view in the background of a WordPress section. However, I am unsure how to achieve this. The issue I'm facing is that I created a wireframe over the diamond, but when ...

javascripthtmlcssthree.jsorbitcontrols

Leveraging clojurescript for displaying a Three.js scene on an HTML webpage

I'm currently working on incorporating the example for creating a scene in three.js using clojurescript. My aim is to display the static scene (which consists of a green block) without any animation. The issue seems to be with the function responsib ...

htmlthree.jsclojurescript

Which is better to use: sql==true or sql===true?

Hey there, could you please take a look at this and thanks in advance! I'm currently working on developing a system for upgrading buildings in my game. I have set up a universal upgrade div that applies to all buildings. When the player clicks on a bu ...

javascriptphpjqueryhtmlajax

Tips for retrieving HTML code from a URL after JavaScript has loaded

I am currently working on developing an app that retrieves data from a website. Unfortunately, the website does not offer an API for this purpose, so I decided to create my own solution. Here is the issue at hand: I have written the following code to extr ...

javascriptjavaandroidhtmlurl

Converting RSS title to HTML format with the help of JavaScript

I am currently working on populating a menu on a webpage with the 5 latest topics from our site's RSS newsfeed using JavaScript (specifically jQuery version 1.9.1). I have been searching for a solution, but most answers I find reference deprecated scr ...

javascriptjqueryhtmlxmlrss

What is causing the javascript in my svg files not to function when embedded in an html document?

I have the following code for an SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="470px" height="260px" version="1.1" onload="addEvent ...

javascripthtmlsvg

Creating a Validation Form using either PHP or JavaScript

I need to create a form with the following columns: fullname, email, mobile, and address. If the visitor fills out the mobile field, they should only be allowed to enter numbers. And if the visitor fills out the email field, they should only be allowed to ...

javascriptphphtmlajax

How can I make my webpage fill the entire width of an iPhone screen when in landscape mode using Angular or React?

While testing my website on my iPhone, I noticed a significant gap appearing on either side of the app in landscape view in Safari. Is there a solution to fix this issue? The problem occurs in both Angular and React applications, examples of which are disp ...

htmlcssreactjsangularmaterial-ui

Animate the CSS when the content is within the viewport using pagepiling.js integration

I'm currently working on animating content as it enters the viewport. However, I've encountered an issue where jQuery (used to check if the content is in the viewport) isn't functioning properly alongside pagepiling.js (). I suspect this mig ...

javascripthtmlcssanimate.csspagepiling.js

Customize your Bootstrap design by selecting a background color that doesn't

Why is the dropdown background black when used in a bg-dark navbar but white when used outside of the navbar? I want to use a white dropdown in a dark navbar. Here is my complete code: MyCode Here is my navbar & dropdown: <nav class="na ...

htmlcssbootstrap-5

What is the best way to change the value of a div using JavaScript?

i could really use some assistance, i am trying to ensure that only the selected template is shown on the screen, while all others are hidden. The expected outcome should be to replace the values of: <div class="city">City<span>,< ...

javascripthtmlfunction

Highlighting the current menu item by comparing the URL and ID

Looking to make my navigation menu items active based on URL and ID, rather than href. None of the suggested solutions (like this one, this one, or this one) have worked for me. This is how my Navigation is designed: <nav id="PageNavigation"& ...

javascripthtmljquerycssnavigation