<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>
ol.group {
  margin-bottom: 2rem;
}
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);
  }
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js