columns need Clear fix applied when column exeeds count of 12 in single row.

[jbhardwaj12]

The code fragment below generates a mis-aligned when page is resized to smaller screen as in screenshot. Due resize when columns do not fit in single row, first column of new row is not aligned. Adding css clear : both or left to the element style fixes this alignment on small screen but breaks medium screen. Probably that needs to be added dynamically ? Observed on Chrome, application using Bootsfaces 0.9.1, Primefaces 6.0, Wildfly 10.

<b:column col-xs="12" col-sm="6">
                <div class="box">
                    <fieldset>
                        <legend>Title</legend>
                    </fieldset>
                    <b:row>
                        <b:column col-sm="6" col-md="3" >
                            <h:outputLabel value="adf" />
                        </b:column>
                        <b:column col-sm="6" col-md="3" >
                            <h:outputText value="adf" />
                        </b:column>
                        <b:column col-sm="6" col-md="3" >
                            <h:outputLabel value="adf" />
                        </b:column>
                        <b:column col-sm="6" col-md="3" >
                            <h:outputText value="adf" />
                        </b:column>
                    </b:row>
                </div>
            </b:column>

[stephanrauh]

@NicolaIsotta @ggam I guess you know what to do here. IMHO, we should simply ask developers to add a new row instead of piling up more than 12 columns. What's your opinion?

Also see http://stackoverflow.com/questions/25715646/more-than-12-cols-per-row-in-bootstrap.