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.
Related Topics
Link with Target="_Blank" and Rel="Noopener Noreferrer" Still Vulnerable
Html5 Input Type Range Show Range Value
How to Fit an Image (Img) Inside a Div and Keep the Aspect Ratio
Jenkins - HTML Publisher Plugin - No CSS Is Displayed When Report Is Viewed in Jenkins Server
Creating a CSS3 Box-Shadow on All Sides But One
Do You Have to Include <Link Rel="Icon" Href="Favicon.Ico" Type="Image/X-Icon" />
How to Allow Only One Radio Button to Be Checked
Align Labels in Form Next to Input
Expand Div to Max Width When Float:Left Is Set
Bootstrap - Align Button to the Bottom of Card
HTML Ordered List 1.1, 1.2 (Nested Counters and Scope) Not Working