Lo siento si la pregunta no es lo suficientemente clara, pero déjame explicarte lo que me pasó.

ahora tengo 5 gráficos creados por Pandas y quiero usar jquery para afectar el sistema de cuadrícula en bootstrap. todos los divs tienen la siguiente clase "col-md-6" excepto el último hijo que tiene "col-md-12", lo que me gustaría hacer es: agregar "col-md-6" al último hijo en caso de que la longitud de los gráficos sea un número par y elimine el "col-md-12" del último.

en realidad, este proceso está funcionando y la clase se agrega al último hijo después de que el documento está listo, sin embargo, el último gráfico aplica "col-md-12" y no aplica "col-md-6" aunque, tiene "col-md-6", pero cuando cambio el tamaño de la página, el gráfico comienza a aplicar "col-md-6".

la pregunta es ¿Cómo puedo aplicar el "col-md-6" dinámicamente sin cambiar el tamaño de la página?

puede ver el comportamiento antes y después del cambio de tamaño para entender a qué me refiero exactamente:

antes de cambiar el tamaño

después de hacer un cambio de tamaño

El código es así: -

 ... <div class="col-md-6 error-graph"> {% if regular_group %} <div style=""> <div style="max-width: 100%;max-height: 100%"> {{ regular_group|safe }} </div> </div> {% endif %} </div> <div class="col-md-12 error-graph"> {% if complex_group %} <div style=""> <div style="max-width: 100%;max-height: 100%"> {{ complex_group|safe }} </div> </div> {% endif %} </div> <script> function add_class(last_child) { let error_graph = $(".error-graph"); if (error_graph.length % 2 === 0) { last_child.removeClass("col-md-12").addClass("col-md-6"); } return last_child; } function resize_graph() { {#$(add_class).width($(this).css("width"));#} let func = add_class($(".error-graph:last-child")); console.log(func); {#$(document).load(func.setWidth = 10);#} } $(document).ready(function () { resize_graph(); }); </script>