CSS

.Diskussion-container {
	display: flex;
	background-color: var(--dewiki-hintergrundfarbe1);
	border: 1px solid var(--dewiki-rahmenfarbe1);
	margin-bottom: 2px;
	margin-top: 2px;
	padding-top: 8px;
	padding-bottom: 8px;
	position: relative;
}
.Diskussion-hauptteil {
	margin: 8px;
	vertical-align: middle;
}
.Diskussion-hinweise {
	width: 250px;
	border-left: 1px solid #aaa;
	font-size: 88%;
	padding-left: 0.5em;
	padding-top: 0.25em;
	margin: 8px;
	vertical-align: middle;
}

/* 
Mobilgeräte
*/
@media 
only screen and (max-width: 720px)  {
	
	.Diskussion-container {
		display: block;
		clear: both;
	}
	.Diskussion-hauptteil {
		border-bottom: 1px solid #aaa;
		padding-bottom: 0.5em;
	}
	.Diskussion-hinweise {
		border-left: none;
		padding-left: 0;
		width: 100%;
	}
	
}

Kopiervorlage

Bearbeiten
<templatestyles src="Diskussionsseite/styles.css" />

Verwendung

Bearbeiten
Diskussion-container
formatiert den gesamten Hinweis (Flexbox, auf Mobilgeräten Block)
Diskussion-hauptteil
formatiert die „linke Spalte“ des Hinweises
Diskussion-hinweise
formatiert die „rechte Spalte“ mit der Aufzählung der Hinweise (in der Mobilversion nach unten verschoben)