In ZURB Foundation 6, is there a way to have columns flow around a hidden column? - zurb-foundation

Question

Using ZURB Foundation 6, is there a way to have columns flow around a hidden column?
So for this code:
<ul class="row large-up-3">
<li class="column column-block large-4" style="display:none;">1</li>
<li class="column column-block large-4">2</li>
<li class="column column-block large-4">3</li>
<li class="column column-block large-4">4</li>
<li class="column column-block large-4">5</li>
<li class="column column-block large-4">6</li>
</ul>
It current displays like this:
2 3
4 5 6
But what I'm hoping to achieve is this:
2 3 4
5 6
Is this feasible?
I don't need to use "display: hidden" if there's another way to do this. That's just placeholder CSS code.
If not, is there a way to do this in Bootstrap or writing my own grid CSS? I can bypass Foundation for this particular content if needed.
Thank you for any help!

Answer 1

Figured it out. In Foundation 6, the following CSS code forces each row to start anew:
.large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
clear: both;
}
Note: I'm using a 3-three column row, so your code will be different, depending on how many columns you have per row.
So if you change clear:both to clear:none, you can then hide columns using display:none, and the columns will automatically fill any gaps.
Why does ZURB do this?
Well, if you change this CSS code, you'll find that your columns don't line up vertically anymore, due to varying column heights.
So this CSS code forces everything to look nice.
If you remove the clear:both code and then run into a alignment problems, you might look into ZURB's "equalizer" code to set all your columns to an equal height.
https://get.foundation/sites/docs/equalizer.html
There are various ways to prettify things further if equal column heights end up looking wrong in your theme, such as using CSS overflow options, but that's getting outside the scope of this question.
I hope this helps someone!