How can I change the stack order of columns on mobile or tablet?
For example, the code below shows elements horizontally on wide screens, but when it's shrinked I want 2 to be on top. I don't want to change the html structure to do it.
The example is below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css" rel="stylesheet"/>
<div class="columns">
<div class="column box">
1
</div>
<div class="column box">
2
</div>
</div>
As of the current bulma version v0.3.1, there is no feature
for the changing the order of columns.
However, you can define custom styles to change the order for mobile, tablet or whatever resolution that you want.
You can define a custom class .reverse-columns for example and add it on parent with following styles:
#media(max-width: 767px) { /* <== You can change this break point as per your needs */
.reverse-columns {
flex-direction: column-reverse;
display: flex;
}
}
#import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css");
#media(max-width: 767px) {
.custom-columns {
flex-direction: column-reverse;
display: flex;
}
}
<div class="columns custom-columns">
<div class="column box">
1
</div>
<div class="column box">
2
</div>
</div>
#media(max-width: $desktop) {
.columns.is-reversed-touch {
flex-direction: column-reverse;
display: flex;
}
}
#media(max-width: $tablet) {
.columns.is-reversed-mobile {
flex-direction: column-reverse;
display: flex;
}
}
You can always add more rules for widescreen etc., but this is what you usually need.
flex-direction: row-reverse; is what I would use for .columns.is-mobile.is-reversed-mobile. So you can add that rule too.
Related
I am trying to get the price under the annual plan.
.paymentsection {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
final image
The .plan and .price needs to be inside a div and then if display flex is applied to the paymentsection, you get your desired result.
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-container">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
Change
</div>
.paymentsection {
display: flex;
flex-direction: row;
}
.plan-container{
flex-grow:1;
}
You need different flex boxes for implementation your image. Each flex box should have different direction. first you need to wrap your .plan div and .price div with another div. This help you to separate pricing component:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="plan-wrapper">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
next you need to set flex direction to your new div element. this is your desire style:
.paymentsection {
display: flex;
}
.plan-wrapper{
display: flex;
flex-direction: column; /* default is row */
}
this changes should fix your issue.
To have the pricing aligned below the text, you'd have to nest the div further and specify the styles of the nested div to be oriented vertically, i.e, flex-direction: column.
You could do something like this:
<div class="paymentsection">
<img src="/images/icon-music.svg" alt="Music" class="icon-img" />
<div class="pricing">
<div class="plan">Annual Plan</div>
<div class="price">$59.99/year</div>
</div>
</div>
Change
Styles for pricing class:
.pricing{
display:flex;
flex-direction: column;
}
I am creating a flex responsive layout.
I have a navigation bar on the left in the desktop version which becomes a top navigation bar on mobile (using media-query)
flex-direction: row;
#media (min-width: 600px) and (orientation:landscape) {
flex-direction: column;
}
That's great, but I want all of its sub-elements to have flex-direction of column (if parent had flex-direction of row), and vice versa... and that continues for about 3-4 depth, with each layer alternating in comparison to its parent (that means that it is going to look like: col -> row -> col -> row or row->col->row->col).
Any easy way of doing this without continuing to media-query all the way to the 4th depth elements?
I did try using variables (I work with SASS), but it seems those variables only get rendered once, and are not "reactive".
I am aiming towards a css/scss solution only btw.
Thanks
If you know you want the direct child to be the opposite of your parent you can style the direct child with the same media query.
this would get ALL .row > .col
assuming markup like:
HTML
<div class="row">
<div class="col"></div>
<div class="col">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
SCSS
.row {
flex-direction: row;
#media (min-width: 600px) and (orientation:landscape) {
flex-direction: column;
}
& > .col {
flex-direction: column;
#media (min-width: 600px) and (orientation:landscape) {
flex-direction: row;
}
}
}
If you need to target the highest .row you would need a top-level modifier class or a parent class above .row, e.g. class="row row--top" or .parent-class > .row
Trying to put a sidebar on top of content text for small screens.
What I tried did not work.
#media(max-width: 820px) {
.head {
display: -webkit-box;
}
.text > .sidebar {
-ms-flex-order: 1;
}
<div class='container'>
<div class='head'>
<aside class='sidebar'>
</aside>
</div>
using flex you can change the flex-direction to column then change the order of the flex items as needed.
you can also use grid in combination with grid-template-areas to set and rearrange the order of grid cells as you see fit. for example, in conjunction with #media
...
grid-template-areas:
"content"
"header";
...
#media (max-width: 500px) {
...
grid-template-areas:
"header"
"content";
...
}
You have a number of problems:
An erroneous <body> tag (simply remove this).
A selector (.text > .sidebar) that will never match the target element.You don't actually need any styling on .sidebar, so I also just removed this.
A logical error -- .head contains no order; I assume you want this below .sidebar in the mobile view, meaning it is .head that would need order: 2 (not .sidebar).
Once all of these are corrected, you simply need to give .container display: flex and flex-direction: column, and the swap will work as expected.
This can be seen in the following (simplified) example:
#media(max-width: 820px) {
.container {
display: flex;
flex-direction: column;
}
.head {
order: 2;
}
}
<div class='container'>
<div class='head'>
<div class="text">
TeXt
</div>
</div>
<aside class='sidebar'>
wordS
</aside>
</div>
I am trying to apply flex to bootstrap 3 container and found strange behaviour of child elements Here is the code.
<div class="container">
<div class="child">One</div>
<div class="child">Two</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
(see example on jsfiddle JSFiddle)
I cannot find out what's the problem with the space-between.
Thank you for the help.
Combining Bootstrap 3 with Flexbox is not recommended.
That said, Bootstraps container class also uses both the pseudo elements, hence they will participate in the flex container being flex items, and here one can see them when giving them a small width/height and background color.
And as you can see, the justify-content: space-between; work as it is supposed to.
.container {
display: flex;
justify-content: space-between;
}
.container::before, .container::after {
width: 30px;
height: 30px;
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="child">One</div>
<div class="child">Two</div>
</div>
One workaround would be a wrapper
.container .flex {
display: flex;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="flex">
<div class="child">One</div>
<div class="child">Two</div>
</div>
</div>
I think the issue is that you're using a classname from bootstrap .container you're attempting to change the style. Just use a id instead of the classname container.
#main {
display: flex;
justify-content: space-between;
}
<div id="main">
<div class="child">One</div>
<div class="child">Two</div>
</div>
I am working on a responsive site in which the mobile/tablet view differs from the desktop view in the way it re-orders the DIVs.
Is there a way to write maintainable CSS that let's you re-organize the order of how HTML DIVs appear?
For example, the code below controls the order of how DIVs would appear on a desktop device:
<div class="container">
<div class="row1">
<div class="col1A">Sample content</div>
<div class="col2A">Sample content</div>
<div class="col3A">Sample content</div>
</div>
<div class="row2">
<div class="col1B">Sample content</div>
<div class="col2B">Sample content</div>
<div class="col3B">Sample content</div>
</div>
</div>
However, for mobile/tablet view, I want to display the DIVs in different order using CSS, like the example below:
Show row2, col2B
Then row1, col1A
Then row1, col3A
Then row2, col1B
Is this possible using CSS ?
As a proof-of-concept, you can use the flex CSS property to reorder how elements are visually rendered.
In your example, I had to keep the child elements within a single container
and then I could control the order using the order property.
If you want to hide some items on the small screen view, use display: none on the specific items.
Note: For a wide screen, you would need some CSS rules to get the items to look like two rows. (Please specify what you need.)
If you combine this with media queries, you can get a workable solution.
.container {
display: flex;
flex: center;
flex-direction: column;
align-items: center;
border: 1px dotted blue;
}
.container div {
text-align: center;
padding: 10px;
border: 1px dotted gray;
width: auto;
}
.col1A {
order: 2;
}
.col2A {
display: none;
}
.col3A {
order: 3;
}
.col1B {
order: 4;
}
.col2B {
order: 1;
}
.col3B {
display: none;
}
<div class="container">
<div class="row1 col1A">Sample content 1A</div>
<div class="row1 col2A">Sample content 2A</div>
<div class="row1 col3A">Sample content 3A</div>
<div class="row2 col1B">Sample content 1B</div>
<div class="row2 col2B">Sample content 2B</div>
<div class="row2 col3B">Sample content 3B</div>
</div>
If you want to simulate two rows of three elements, you can still use flex with some adjustments. The following may be helpful.
.container {
display: flex;
flex: center;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
border: 1px dotted blue;
padding: 20px 0;
}
.container .row1 {
margin-bottom: 20px;
}
.container div {
text-align: center;
padding: 10px;
border: 1px dotted gray;
flex-basis: calc(33% - 20px);
}
.col1B {
background-color: yellow;
}
<div class="container">
<div class="row1 col1A">Sample content 1A</div>
<div class="row1 col2A">Sample content 2A</div>
<div class="row1 col3A">Sample content 3A</div>
<div class="row2 col1B">Sample content 1B</div>
<div class="row2 col2B">Sample content 2B</div>
<div class="row2 col3B">Sample content 3B</div>
</div>
Set a screen size for mobile device detection in the css and add the following
#media screen and (max-width: SIZE) {
.row2{
display: flex; flex-flow: column;
}
.col1B{
order: 1;
}
.col2B{
order: 2;
}
.col3B{
order: 3;
}
}
And then add the classes to the DIVs
<div class="row2">
<div class="col1B">Sample content</div>
<div class="col2B">Sample content</div>
<div class="col3B">Sample content</div>
</div>
Change order: 1/2/3; to your needs.