For a div defined as <div class="col-sm-2 col-lg-4">, how many columns will it occupy in a md viewport?

In the context of Bootstrap's grid system, column classes are defined to specify how many columns a particular element will occupy on different screen sizes. The grid system is divided into 12 equal columns.

The classes used in the provided div are "col-sm-2" and "col-lg-4." Each class indicates how many columns the div will span at specific viewport sizes. The "sm" (small) viewport size applies to devices that are 576px and above, while the "lg" (large) size is for devices that are 992px and above.

When the viewport is MD (medium), which ranges from 768px to 991px, neither of these classes directly applies since there is no specific class for the medium viewport. In Bootstrap, if no column size class is defined for a specific viewport size, the default behavior is to use the next largest class that is defined. In this case, since "col-sm-2" applies to the small viewport and is the nearest defined class below the medium size, it's used.

Therefore, the div will occupy 2 of the 12 columns in a medium viewport, confirming that at this size, it effectively occupies 2 columns.