Что значит данная запись в CSS?

Это означает div с классом, начинающимся с указанного текста col.
.col1, .column, .col-12 попадают под селектор.

Это довольно старая инструкция, у нее отличная кроссбраузерность

Значение атрибута начинается с определённого текста

Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис применения следующий.

[атрибут^="значение"] { Описание правил стиля } 
Селектор[атрибут^="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.

Пример:

a[href^="http://"] {  
  font-weight: bold /* Жирное начертание */ 
 }

<p><a href="1.html">Обычная ссылка</a> |  
  <a href="http://htmlbook.ru" target="_blank">Внешняя  
  ссылка на сайт htmlbook.ru</a></p>

Внешние ссылки начинающиеся с ключевого слова http:// будут выделены жирным начертанием.

Источник

P.S: там же и о других селекторах атрибутов.

[attr^="val"] означает, что выбрать элемент, атрибут которого начинается с val, например "value".

У вас значит выбрать div у которого class начинается с col

На сколько кроссбраузерно можно посмотреть на всеизвестном ресурсе caniuse

В частности получается так:

В целом селекторы можно посмотреть на w3schools