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;
}

[averyjohnston]

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.