Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text
This on top is a color-section with two columns in it.
The Left one ( 3/5 column has 5 Image ALB in it and no other elements please )
This column got a custom-class : flex4on1
read more about flexbox:
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
.flex4on1 {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding-top: 25px
}
.flex4on1::before,
.flex4on1::after {
margin: 0 !important;
display: none !important;
}
.flex4on1 .avia-image-container {
flex: 0 1 calc(50% - 2px);
margin: 0 0 4px;
}
.flex4on1 .avia-image-container:nth-of-type(5n) {
flex: 1 1 100%
}
/*** just if you want to have the 2 columns in reverse order ***/
@media only screen and (max-width: 767px) {
#section_with4on1 .entry-content-wrapper {
display: flex;
flex-flow: row wrap-reverse;
justify-content: flex-start;
}
}