Switching the Order of Block Elements With Css

Switching the order of block elements with CSS

As has already been suggested, Flexbox is the answer - particularly because you only need to support a single modern browser: Mobile Safari.

See: http://jsfiddle.net/thirtydot/hLUHL/

You can remove the -moz- prefixed properties if you like, I just left them in for future readers.

    #blockContainer {        display: -webkit-box;        display: -moz-box;        display: box;                -webkit-box-orient: vertical;        -moz-box-orient: vertical;        box-orient: vertical;    }    #blockA {        -webkit-box-ordinal-group: 2;        -moz-box-ordinal-group: 2;        box-ordinal-group: 2;    }    #blockB {        -webkit-box-ordinal-group: 3;        -moz-box-ordinal-group: 3;        box-ordinal-group: 3;    }

    <div id="blockContainer">        <div id="blockA">Block A</div>        <div id="blockB">Block B</div>        <div id="blockC">Block C</div>    </div>

Is it possible to change order of inline elements without changing HTML?

if the width is fixed you can rely on text-indent and position:absolute

h1 {
  position:relative;
  text-indent:122px;
}

.red {
  color: red;
  position:absolute;
  top:0;
  left:0;
  text-indent:0;
}
span {
  outline: 2px solid blue;
}
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div {
  max-width: 300px;
  border: 2px solid red;
  margin: 2rem;
  padding: 1rem;
}

<div>
  <h1>
    <span>Lorem ipsum sit dolores</span>
    <span class='red'>EKP itd.</span>
  </h1>
</div>

Switching the order of child elements on the body with CSS

You need to "unwrap" the other divs using display:contents.

body {
  display: flex;
}

div {
  border: 1px solid grey;
}

#wrap {
  display: contents;
}

#blockB {
  order: -1;
}

<div id="blockA">Block A</div>

<div id="wrap">
  <div id="blockB">Block B</div>
  <div id="blockC">Block C</div>
</div>

How to change order of elements in a row from horizontal to vertical?

I got it working using:

.astra-shop-summary-wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
}

This also works:

.qib-container {
   display:flex;
   justify-content:center;
   width:100%;
   margin-bottom: .5rem;
}

I'm not sure why display:block does not work, but adding a with to it works as it is set to inline-block.

How do I change the order of elements using only CSS?

I can't use Flexbox since I need to support older browsers.

For older browser support, with the flexibility of Javascript pollyfills are a great way to move forward.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Also using something like Babel. https://babeljs.io/ it's also possible to make Javascript more modern too.

Basically the best approach I use nowadays for HTML/Javascript development is assume a modern browser, if older ones are needed polyfill / transpile as required.

Change order of blocks for mobile and desktop both vertically and horizontally

This might be better suited to CSS Grid Layout and media queries.

.container {  display: grid;  grid-template-columns: repeat(1, 1fr);}
@media(min-width: 375px) {  .container {    grid-template-rows: repeat(3, 100px);    grid-template-columns: repeat(2, 1fr);  }
  .child2 {    grid-row-start: 1;    grid-row-end: 4;  }}

<div class="container">  <div>1</div>  <div class="child2">2</div>  <div>3</div>  <div>4</div></div>

How would I rearrange the order on an inline-block in CSS?

If you want to rearrange the .member_actions buttons you can add position: absolute to the class, then use .member_actions:nth-child(1), .member_actions:nth-child(2) and so on and add left: -50px to position element 50 pixels to the left, or left: 50px to position element 50 pixels to the right. See sample jsfiddle

To add a small icon, again use .member_actions:nth-child(n) , where n is 1, 2, 3 etc. to target specific element, add background: url("path_to_img.png") 0 0 no-repeat; --> 0 pixels from the left, 0 from the top, and add padding-left: 40px assuming 40px is the width of your image, if not change the value accordingly. This will drop the background image left from the text and add padding to the text, so it doesn't overlap the image.

Switching the Order of Block Elements With Css