<div class="container">
<div id="sample" class="row">
<ol id="ul">
<li class="list">item1</li>
<li class="list">item2</li>
<li class="list">item3</li>
<li class="list">item4</li>
<li class="list">item5</li>
<li class="list">item6</li>
<li class="list">item7</li>
<li class="list">item8</li>
<li class="list">item9</li>
<li class="list">item10</li>
<li class="list">item11</li>
<li class="list">item12</li>
</ol>
</div>
</div>
<div id="lg" class="d-none d-lg-block">LG</div>
<div id="md" class="d-none d-md-block d-lg-none">MD</div>
<div id="sm" class="d-none d-sm-block d-md-none">SM</div>
var $win = $(window);
var $origin = $('#sample').html();
$win.on( 'load resize', function() {
$( '#ul' ).replaceWith( $origin );
if ( $( '#lg' ).is( ':visible' ) ) {
$( 'li' ).css( 'color', 'black' );
do {
$( "#ul" ).children( "li:lt(4)" ).wrapAll( '<ol class="group"></ol>' )
} while ( $( "#ul" ).children( "li" ).length );
} else if ( $( '#md' ).is( ':visible' ) ) {
$('li').css('color', 'blue');
do {
$( "#ul" ).children( "li:lt(3)" ).wrapAll( '<ol class="group"></ol>' )
} while ( $( "#ul" ).children( "li" ).length );
} else {
$( 'li' ).css( 'color', 'red' );
do {
$( "#ul" ).children( "li:lt(2)" ).wrapAll( '<ol class="group"></ol>' )
} while ( $( "#ul" ).children( "li" ).length);
}
})
