I've had a look and the order of the instagram posts on desktop works as Header > Latest Image > Second Post > Third Post. Which is correct however, on mobile you order stacks in a bizarre way Latest Image > Second Post > Third Post > Header. So the user doesn't realise it's the instagram feed till they are past it. Is there a way I can reorder the stack for mobile.
Hi There,
I've had a look and the order of the instagram posts on desktop works as Header > Latest Image > Second Post > Third Post. Which is correct however, on mobile you order stacks in a bizarre way Latest Image > Second Post > Third Post > Header. So the user doesn't realise it's the instagram feed till they are past it. Is there a way I can reorder the stack for mobile.
I basically need to have this
<div class="column block-strip-thumb is-3-desktop is-6-tablet">
<div class="column block-strip-thumb is-3-desktop is-6-tablet">
<div class="column block-strip-thumb is-3-desktop is-6-tablet">
<div class="column is-3-desktop is-6-tablet block-strip-title-column">
to
<div class="column is-3-desktop is-6-tablet block-strip-title-column">
<div class="column block-strip-thumb is-3-desktop is-6-tablet">
<div class="column block-strip-thumb is-3-desktop is-6-tablet">
<div class="column block-strip-thumb is-3-desktop is-6-tablet">
as there is this styling in the css, taking the "block-strip-title-column"
@media screen and (min-width: 769px)
.block.block-strip .block-strip-title-column {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
So this reorders the title post to the front.
Hi Jake,
Use this code:
@media screen and (max-width: 768px) {
.block.block-strip .columns {
display: flex;
flex-direction: column;
}
.block.block-strip .block-strip-title-column {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
}
Cheers, P.