CSS utilities, float elements code snippet doesn't actually leverage float classes for layout due to grid

[abennouna]

I'm submitting a ...
[x] bug report
[ ] feature request

URL:
https://beta.ionicframework.com/docs/layout/css-utilities#element-placement

Current behavior:
The markup does not actually leverage float-* attributes since it uses a grid.

Expected behavior:
A relevant markup, without a grid.

Steps to reproduce:

• Copy sample markup,
• Change with responsive float attributes that should reverse the float positions, for instance:

<ion-grid>
 <ion-row>
 <ion-col float-left float-md-right>
 <div>
 <h3>float-left (should be float-right above md breakpoint)</h3>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
 </div>
 </ion-col>

 <ion-col float-right float-md-left>
 <div>
 <h3>float-right (should be float-left above md breakpoint)</h3>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
 </div>
 </ion-col>
 </ion-row>
</ion-grid>

• Notice that it doesn't work as advertised,
• Debug and see that Flexbox is handling the actual layout.

Other information:
Can be fixed with the following markup and CSS that both mimic the grid structure:

Template

<div class="ion-grid">
 <div class="ion-row">
 <div class="ion-col ion-col-33" float-left float-md-right>
 <div>
 <h3>float-left (should be float-right above md breakpoint)</h3>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
 </div>
 </div>

 <div class="ion-col ion-col-33" float-right float-md-left>
 <div>
 <h3>float-right (should be float-left above md breakpoint)</h3>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
 </div>
 </div>
 </div>
</div>

CSS

.ion-col {
 padding: 5px;
}

.ion-col-33 {
 width: 33%;
}

.ion-grid {
 padding: 0 0 20px 0;
}

.ion-col div {
 background-color: #f5f7fa;
 border: 1px solid #e4e8f0;
 padding: 5px;
}

.ion-row:after {
 content: "";
 clear: both;
 display: block;
}

[averyrousseau]

Confirmed that this is still an issue in the latest version of the docs: https://ionicframework.com/docs/layout/css-utilities#float-elements We may even want to add a playground here.