The best way is to make a SQL query to the database and get the results like the wp_get_archives()
does but now you can manipulate the results as you wish.
In your case I would do something like this I added some comments to help you understand the process.
function get_archives_lists() {
global $wpdb, $wp_locale;
// get year month array
$monthly = $wpdb->get_results("
SELECT YEAR(post_date) AS year, MONTH(post_date) AS month
FROM $wpdb->posts
WHERE post_type="post" AND post_status="publish"
GROUP BY YEAR(post_date), MONTH(post_date)
ORDER BY post_date DESC
", ARRAY_A);
// Rearrange the results to be [year][] = month so it will be easy to render
$arr = [];
array_map(function($item) use (&$arr) {
$arr[$item['year']][] = $item['month'];
return;
}, $monthly);
// loop years
foreach($arr as $yearKey => $year) {
?>
<div class="col-sm-2">
<h2><a href="https://wordpress.stackexchange.com/questions/307058/<?php echo get_year_link($yearKey); ?>"><?php echo $yearKey; ?></a></h2>
<ul>
<?php
// loop 12 for monthes
for($m = 1; $m <= 12; $m++) {
// get month name
$month = sprintf( __( '%1$s' ), $wp_locale->get_month( $m ) );
?>
<li>
<?php
// check if the month is in our results so we add a link to it.
if(in_array($m, $year)) {
?>
<a href="<?php echo get_month_link($yearKey, $m); ?>"><?php echo $month; ?></a>
<?php
} else {
echo $month;
}
?>
</li>
<?php
}
?>
</ul>
</div>
<?php
}
}
You can see I used the bootstrap class col-sm-2
just for example you can use your own class and css.