Schema.org element "VideoObject"

You want to apply flexbox model as here – and set parent element ( entry-content-wrapper ) to display flex? But in my opinion this requires to keep the flex columns exclusively in an enclosing ( color-section ) container. Then it would be enough to set the flex-flow to row wrap-reverse on responsive case. Otherwise, properties would still have to be assigned to the flex items.
With grid-row this is automatically the case – each flex-cell row is separate from other flex-cells. See: https://webers-testseite.de/reverse-order/
See the example page with one color-section ( white background ) and 6 1/3 flex-columns. On that it will be nice to have on the flex-column itself an input field with flex order number
Result you see belongs to:

@media only screen and (max-width: 767px) {
	.page-id-38828 .avia-section.reverse-order .entry-content-wrapper .flex_column {
		flex: 1 1 100%;
		margin-bottom: 30px !important;
	}
	 .page-id-38828 .avia-section.reverse-order .entry-content-wrapper .flex_column:nth-of-type(2),
         .page-id-38828 .avia-section.reverse-order .entry-content-wrapper .flex_column:nth-of-type(3) ,
         .page-id-38828 .avia-section.reverse-order .entry-content-wrapper .flex_column:nth-of-type(6)  {
		order: 1;
	}
	.page-id-38828 .avia-section.reverse-order .entry-content-wrapper .flex_column:nth-of-type(1),
        .page-id-38828 .avia-section.reverse-order .entry-content-wrapper .flex_column:nth-of-type(4),
        .page-id-38828 .avia-section.reverse-order .entry-content-wrapper .flex_column:nth-of-type(5) {
		order: 2;
	}
}

the trick will be that on responsive case this reverse order will be set in your media query ( when those columns should break to 100% width )
it only makes sense if the reverse order influences only one column row. ( yellow background )

________
Read More : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
the direct parent element should be the flexbox – the first children are the flex-items.

@Günter,

Do you also want to make the column space adaptable? Now the column space is 7%, which is far too large in modern designs.

@Günter,

Nice job Gunter! Waited a long time for this feature:

avf_alb_default_column_space

Now only the sticky mobile menu remains, then my wishes for the coming time are provided again! And is Enfold closer to a modern theme..

I hear from you Gunter.

you can use this code as an example:

/**
 * Change the column gap
 *
 * @since 4.8.7.1
 */
function wv_column_spacing($space) {
	$space = 2.0;

	return $space;
}
add_filter('avf_alb_default_column_space', 'wv_column_spacing', 999, 1);

^ This filter ensures that the space between all columns becomes 2%.

• This reply was modified 3 years, 1 month ago by Webvriend.

@Günter, Have you done some more research on a sticky header for mobile?