I have a row of icons and as there are 4, I never want it to have 3 on one row and 1 on the other.
Is there a way to achieve this in a flex layout (all those controls are confusing and dont seem to work for me) or would I be better putting two lots of containers containing 2 columns?
This is a desktop width
this is mobile
This is seriously confusing (and I’m not even sure it does anything!)
Is there a video anywhere of how to use all of these properly?
Well these are the standard CSS Flex properties: https://www.w3schools.com/cssref/css3_pr_flex.asp
What are you trying to achieve exactly? Show 4 logos in one row on ANY screen sizes 320 to 2500+ px?
And are you using the App Structure flex container properties or are you working in Design Panel?
I want the logos in 2 rows, 2 columns on mobile and 1 row 4 columns evenly distributed on anything above mobile width.
Yes I’m using the design panel. Not sure what you mean by App Structure flex container properties. Are you suggesting I just do it all as code when suggesting the w3schools link?
No, i was just explaining what all these options do 
Why use a flex container for this, when you can do it with the Bootstrap 4 grid?
<div class="container">
<div class="row">
<div class="col-6 col-md-3"><img class="img-fluid" src="myimg.jpg"></div>
<div class="col-6 col-md-3"><img class="img-fluid" src="myimg.jpg"></div>
<div class="col-6 col-md-3"><img class="img-fluid" src="myimg.jpg"></div>
<div class="col-6 col-md-3"><img class="img-fluid" src="myimg.jpg"></div>
</div>
</div>