Columns and breakpoints

Six breakpoints, and all sizes. The dropdown on the right of the toolbar picks the view. In All sizes the canvas renders as the browser would, and the width and indent tools write one class for every size (col-4), replacing what the breakpoints had. Pick a single breakpoint and the canvas narrows to its width, its classes become the effective ones whatever your window is doing, and the tools write only that breakpoint. The first row has a different size at each one, and the second an offset that changes from phone to desktop.

Equal and auto. A column is a number of twelfths, equal (col: an equal share of what the row has left) or auto (col-auto: as wide as its content), at each breakpoint. Every size is in the Width field of a column's settings, under Responsive; the width tools and dragging an edge turn an equal or auto column into a number, starting from the width it has.

Columns per row. A row's Columns per row field shares the line out among the columns that have no size of their own. The cards in the second section are one per line on phones, two on tablets, four on desktops.

Sections. Bootstrap's containers, grouping rows. Drag rows in and out of them, choose their width in their settings, and switch views to see each one as wide as its container would be. The first two rows are in none: drag one into a section.

Last width change: none yet

Show the html this produces