Как в CSS сделать так, чтобы задача, в зависимости от приоретета отправлялась в разные блоки?

Есть html файл, который отвечает за создание главного меню сайта. На сайте отображаются задачи разного приоритета.

  <div class="col-md-12">
      <h1>My Tasks</h1>
      <%= link_to "New task", new_task_path, class: 'btn btn-primary' %>
      <% @tasks.each do |task| %>
         <%= render partial: 'task', object: task %>
      <%end %>
      <hr />
      <% @completed_tasks.each do |task| %>
         <%= render partial: 'task', object: task %>
      <% end %>
    </div>

Есть CSS файл, в котором задачи разных приоритетов обозначаются разными цветами:

    .priority_1 {color: #009090}
    .priority_2 {color: #c09000}
    .priority_3 {color: #c00000}

Как сделать так, чтобы задачи разных приоритетов добавлялись в разные блоки на сайте (как бы добавлялись в разные списки)?